混合模式 | 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
最终颜色具有顶部颜色的亮度，同时使用底部颜色的色调和饱和度。
随着层交换，这种混合模式相当于颜色。
插入混合模式
更改突然发生插入混合模式之间的变化。
规范
Specification | Status | Comment |
|---|---|---|
Compositing and Blending Level 1The definition of '<blend-mode>' in that specification. | Candidate Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support | 35 | 30 | No support | 22 | ? |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | 56 | 59 | 54 | No support | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
