混合模式 | blend-mode

blend-mode

<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相似，最终颜色比较柔和。

这种混合模式类似于，hard-light。

效果类似于 扩散 一个在背景的聚光灯。

difference

黑色层没有效果，而白色层反转另一层的颜色。最终的颜色是从较浅的颜色中减去两种颜色的较暗的结果。

黑色层没有效果，而白色层颠倒为另一层的颜色。

exclusion

最后的颜色类似于difference,但相对较少。

像difference一样，黑色层没有效果，而白色层颠倒为另一层的颜色。

hue

同时使用底部颜色的饱和度和亮度，最终颜色具有顶部颜色的色调。

saturation

最终颜色具有顶部颜色的色调，同时使用底部颜色的饱和度和发光度。

纯灰色的背景，没有饱和，将没有效果。

color

最终颜色具有顶部颜色的色调和饱和度。

而使用底部颜色的亮度，效果保留了灰度级别，可用于前景着色。

luminosity

最终颜色具有顶部颜色的亮度，同时使用底部颜色的色调和饱和度。

随着层交换，这种混合模式相当于颜色。

插入混合模式

更改突然发生插入混合模式之间的变化。

规范

浏览器兼容性