Skip to content

混合模式

混合模式有两个属性:mix-blend-modebackground-blend-mode

mix-blend-mode

描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

语法

css
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;

mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;
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;

mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

background-blend-mode

background-blend-mode 定义该元素的背景图片,以及背景色如何混合。混合模式应该按 background-image CSS 属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等,它会被截取至相等的数量。

语法

css
background-blend-mode: <mix-blend-mode>; // 参看上面的值

/* 单值 */
background-blend-mode: normal;

/* 双值,每个背景一个值 */
background-blend-mode: darken, luminosity;

background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;
background-blend-mode: <mix-blend-mode>; // 参看上面的值

/* 单值 */
background-blend-mode: normal;

/* 双值,每个背景一个值 */
background-blend-mode: darken, luminosity;

background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

blend-mode

当层重叠时,混合模式是计算像素最终颜色值的方法,每种混合模式采用前景和背景的颜色值,执行其计算并返回最终的颜色值。最终的可见层是对混合层中的每个重叠像素执行混合模式计算的结果。

属性值

normal: 最终颜色永远是顶层颜色,无论底层颜色是什么。 其效果类似于两张不透明的纸重叠(overlapping)在一起。

multiply: 最终颜色为顶层颜色与底层颜色相乘的结果。 如果叠加黑色层,则最终层必为黑色层,叠加白色层不会造成变化。 其效果类似于在透明薄膜上重叠印刷的两个图像。

screen: 最终的颜色是反转顶层颜色和底层颜色,将反转后的两个颜色相乘,再反转相加得到的和得到的结果。 黑色层不会造成变化,白色层导致白色最终层。 其效果类似于(被投影仪)投射到投影屏幕上的两个图像。

overlay: 如果底层颜色比顶层颜色深,则最终颜色是 multiply 的结果,如果底层颜色比顶层颜色浅,则最终颜色是 screen 的结果。 此混合模式相当于顶层与底层互换后的 hard-light。

darken: 最终颜色是由每个颜色通道下,顶底两层颜色中的最暗值所组成的颜色。

lighten: 最终颜色是每个颜色通道下,顶底两层颜色中的最亮值所组成的颜色。

color-dodge: 最终颜色是将底部颜色除以顶部颜色的反色的结果。 黑色前景不会造成变化。前景如果是背景的反色,会得到白色(fully lit color,完全亮起的颜色,应当为白色)。 此混合模式类似于 screen,但是,前景只需要和背景的反色一样亮,最终图像就会变为全白。

color-burn: 最终颜色是反转底部颜色,将反转后的值除以顶部颜色,再反转除以后的值得到的结果。 白色的前景不会导致变化,前景如果是背景的反色,会得到黑色。 此混合模式类似于 multiply,但是,前景只需要和背景的反色一样暗,最终图像就会变为全黑。

hard-light: 如果顶层颜色比底层颜色深,则最终颜色是 multiply 的结果,如果顶层颜色比底层颜色浅,则最终颜色是 screen 的结果。 此混合模式相当于顶层与底层互换后的 overlay。 其效果类似于在背景层上(用前景层)打出一片_刺眼_的聚光灯。

soft-light:
  最终颜色类似于 hard-light 的结果,但更加柔和一些。 此混合模式的表现类似 hard-light。 其效果类似于在背景层上(用前景层)打出一片_发散_的聚光灯。
  最终颜色是 两种颜色中较浅的颜色 减去 两种颜色中较深的颜色 得到的结果。 黑色层不会造成变化,而白色层会反转另一层的颜色。

exclusion: 最终颜色类似于 difference,但对比度更低一些。 和 difference 相同,黑色层不会造成变化,而而白色层会反转另一层的颜色。

hue: 最终颜色由顶部颜色的_色调_和底部颜色的_饱和度_与_亮度_组成。

saturation: 最终颜色由顶部颜色的_色调_和底部颜色的_饱和度_与_发光度_组成。 饱和度为零的纯灰色背景层不会造成变化。

color: 最终颜色由顶部颜色的_色调_与_饱和度_和底部颜色的_亮度_组成。 此效果保留了灰度级别,可用于为前景着色。(The effect preserves gray levels and can be used to colorize the foreground.)

luminosity: 最终颜色由顶部颜色的亮度和底部颜色的色调和饱和度组成。此混合模式相当于顶层与底层互换后的 color。
normal: 最终颜色永远是顶层颜色,无论底层颜色是什么。 其效果类似于两张不透明的纸重叠(overlapping)在一起。

multiply: 最终颜色为顶层颜色与底层颜色相乘的结果。 如果叠加黑色层,则最终层必为黑色层,叠加白色层不会造成变化。 其效果类似于在透明薄膜上重叠印刷的两个图像。

screen: 最终的颜色是反转顶层颜色和底层颜色,将反转后的两个颜色相乘,再反转相加得到的和得到的结果。 黑色层不会造成变化,白色层导致白色最终层。 其效果类似于(被投影仪)投射到投影屏幕上的两个图像。

overlay: 如果底层颜色比顶层颜色深,则最终颜色是 multiply 的结果,如果底层颜色比顶层颜色浅,则最终颜色是 screen 的结果。 此混合模式相当于顶层与底层互换后的 hard-light。

darken: 最终颜色是由每个颜色通道下,顶底两层颜色中的最暗值所组成的颜色。

lighten: 最终颜色是每个颜色通道下,顶底两层颜色中的最亮值所组成的颜色。

color-dodge: 最终颜色是将底部颜色除以顶部颜色的反色的结果。 黑色前景不会造成变化。前景如果是背景的反色,会得到白色(fully lit color,完全亮起的颜色,应当为白色)。 此混合模式类似于 screen,但是,前景只需要和背景的反色一样亮,最终图像就会变为全白。

color-burn: 最终颜色是反转底部颜色,将反转后的值除以顶部颜色,再反转除以后的值得到的结果。 白色的前景不会导致变化,前景如果是背景的反色,会得到黑色。 此混合模式类似于 multiply,但是,前景只需要和背景的反色一样暗,最终图像就会变为全黑。

hard-light: 如果顶层颜色比底层颜色深,则最终颜色是 multiply 的结果,如果顶层颜色比底层颜色浅,则最终颜色是 screen 的结果。 此混合模式相当于顶层与底层互换后的 overlay。 其效果类似于在背景层上(用前景层)打出一片_刺眼_的聚光灯。

soft-light:
  最终颜色类似于 hard-light 的结果,但更加柔和一些。 此混合模式的表现类似 hard-light。 其效果类似于在背景层上(用前景层)打出一片_发散_的聚光灯。
  最终颜色是 两种颜色中较浅的颜色 减去 两种颜色中较深的颜色 得到的结果。 黑色层不会造成变化,而白色层会反转另一层的颜色。

exclusion: 最终颜色类似于 difference,但对比度更低一些。 和 difference 相同,黑色层不会造成变化,而而白色层会反转另一层的颜色。

hue: 最终颜色由顶部颜色的_色调_和底部颜色的_饱和度_与_亮度_组成。

saturation: 最终颜色由顶部颜色的_色调_和底部颜色的_饱和度_与_发光度_组成。 饱和度为零的纯灰色背景层不会造成变化。

color: 最终颜色由顶部颜色的_色调_与_饱和度_和底部颜色的_亮度_组成。 此效果保留了灰度级别,可用于为前景着色。(The effect preserves gray levels and can be used to colorize the foreground.)

luminosity: 最终颜色由顶部颜色的亮度和底部颜色的色调和饱和度组成。此混合模式相当于顶层与底层互换后的 color。

示例

文字和背景

可以看到第一个div里未进行混合,则黑色背景下的文字就看不见了;而第二个div里进行了混合,则文字都清晰可见

使用场景

例如在用户角色或者会员体系管理时,会对某些信息进行背景颜色区分,那么在使用同一个字体颜色的情况下,很可能有些背景色下文字就会看不清,那使用混合模式就可以解决这个问题

给不规则图片/ICON 上色

将鼠标放到图片上查看效果

使用 mix-blend-mode: lighten 实现抖音 LOGO