一、滤色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应用
以下是一些直观的特性&