CSS元素内容与父元素内容背景混合模式的样式属性mix-blend-mode

mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合，类似于photoshop中的混合模式。应用场景有：图像叠加效果（如multiply正片叠底，融合.jpg图片背景颜色）、文字与背景融合（如 difference 实现高对比文字）、动态视觉设计（如 overlay 创建光效）。

样式语法：

mix-blend-mod:  <blend-mode>

<blend-mode> 的值可以是以下几个：

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

混合模式属性值的作用描述：

1. 基础混合模式

normal（默认值）

不应用混合效果，元素内容直接覆盖在背景上（透明度仍生效）。

2. 变暗类混合

multiply（正片叠底）

将前景与背景颜色相乘，结果颜色通常更暗。类似叠加透明纸张的效果，适合暗化图像或阴影。

darken（变暗）

对比前景和背景颜色，保留更暗的像素。适用于突出深色区域。

3. 变亮类混合

screen（滤色）

将前景与背景颜色的反相值相乘后取反，结果通常更亮。类似投影仪叠加光线，适合提亮效果。

lighten（变亮）

对比前景和背景颜色，保留更亮的像素。适用于突出浅色区域。

4. 对比类混合

overlay（叠加）

结合 multiply 和 screen，根据背景明暗调整混合结果。背景亮则提亮，暗则加深，适合高对比效果。

hard-light（强光）

类似 overlay，但以前景色为基准调整背景。前景亮则提亮（screen），暗则加深（multiply）。

soft-light（柔光）

模拟柔和光线照射效果，对比度低于 overlay，常用于自然的光影融合。

5. 差异类混合

difference（差值）

计算前景与背景颜色的绝对差异，产生反相效果。白色会反转背景色，黑色无变化。

exclusion（排除）

类似 difference，但对比度更低，生成更柔和的差异效果。

6. 颜色成分混合

hue（色相）

保留前景的色相，但使用背景的饱和度和亮度。适用于改变颜色而不影响明暗。

saturation（饱和度）

保留前景的饱和度，但使用背景的色相和亮度。适合调整色彩鲜艳度。

color（颜色）

保留前景的色相和饱和度，但使用背景的亮度。常用于黑白图像着色。

color-dodge：若背景为纯黑（#000），混合后仍为纯黑。

color-burn：若背景为纯白（#fff），混合后仍为纯白。

luminosity（亮度）

保留前景的亮度，但使用背景的色相和饱和度。适合调整亮度而不改变颜色。

特殊值

initial

重置为默认值 normal。

inherit

继承父元素的 mix-blend-mode 值。

unset

根据上下文自动选择 inherit 或 initial。

注意：实际效果受颜色空间和透明度影响，不同浏览器可能存在差异，建议多环境测试。此外过度使用可能增加渲染负担，尤其在低性能设备上。

混合模式的效果：

PS：截图来自https://developer.mozilla.org/zh-CN/docs/Web/CSS/mix-blend-mode