html5 滤色,深入理解CSS mix-blend-mode滤色screen混合模式

建议在非IE浏览器下浏览本文，否则很多实时渲染效果看不到，影响阅读。

一、滤色screen混合模式速览

screen混合模式，国内称为“滤色”，其计算公式是：

公式中的C表示最终混合的RGB色值(范围是0-255)，A和B表示用来混合的两个颜色的RGB色值(范围也是0-255)。

从公式的内容可以看出，滤色混合模式的颜色，是将两个颜色的互补色的像素值相乘，然后除以255的互补色值。

例如有一个红色，其RGB值是(255,0,0)，还有一个蓝色，其RGB值是(0,0,255)，则这两个颜色使用滤色混合模式之后的颜色色值是：

R = 255 – (255 – 255) * (255 – 0) / 255 = 255

G = 255 – (255 – 0) * (255 – 0) / 255 = 0

B = 255 – (255 – 0) * (255 – 255) / 255 = 255