web前端入门到实战：CSS mix-blend-mode滤色screen混合模式

一、滤色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

于是最终的色值是 RGB(255,0,255) ，也就是下面这个色块的颜色：

然后下面这个是应用mix-blend-mode:screen代码的实时混合色值效果：

可以看到，两个色块呈现的颜色是一模一样的，既验证了公式的正确性，也对滤色模式有了第一次的认识。

二、滤色模式的特性与web应用

以下是一些直观的特性：

1. 任何颜色和黑色执行滤色，还是呈现原来的颜色；
2. 任何颜色和白色执行滤色得到的是白色；
3. 任何颜色和其他颜色执行滤色模式混合后的颜色会更浅，有点类似漂白的效果。

滤色模式模式对于在图像中创建霓虹辉光效果是非常有用的，这一特性对于Web开发也同样受用。