混合模式 | blend-mode (Compositing & Blending) - CSS 中文开发手册

<blend-mode>这个词关键是一组描述混合模式的类型。

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

语法

使用一个简单的值定义混合模式。

值

normal

不管底部的颜色是什么，最终的颜色是顶部的颜色。

效果类似于两张不透明的纸张重叠。

multiply

该效果类似于在透明膜重叠上印刷的两个图像。黑色层导致黑色最终层，白色层导致无变化。

黑色层导致黑色最终层，白色层导致无变化。

该效果类似于在透明膜重叠上印刷的两个图像。

screen

最终的颜色是反转颜色，将它们相乘，并反转该值的结果。

效果类似于照射到投影屏幕上的两个图像，黑色层导致无变化，白色层导致白色最终层。

效果类似于照射到投影屏幕上的两个图像。

overlay最终的颜色是multiply底部颜色较深或者screen底部颜色较浅的结果。

这种混合模式相当于hard-light交换图层。

darken

最终颜色是由每个颜色通道的最暗值组成的颜色。

lighten

最终颜色是由每个颜色通道的最亮值组成的颜色。

color-dodge

最终颜色是将底部颜色除以顶部颜色的倒数的结果。

黑色前景导致没有变化。具有背景的反色的前景将导致完全亮起的颜色。

这种混合模式类似于屏幕，但前景只需要像背景的反转一样轻，以达到完全亮起的颜色。

color-burn

将值除以顶部颜色，并反转该值的结果。

一个白色的前景没有变化，具有背景的反色的前景导致黑色最终图像。

这种混合模式类似于乘法，但是前景只需要像背景的反转一样暗，以使最终图像变黑。

hard-light

最后的颜色是multiply如果顶部颜色更深，或者screen如果上面的颜色是浅色的结果。

这种混合模式相当于overlay交换图层。

其效果类似于在背景下闪耀着强烈的聚光灯。

soft-light

最终颜色与hard-light相似，最终颜色比较柔和。