标签：颜色 screen 模式 混合 mix 滤色 255

一、滤色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前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

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

以下是一些直观的特性：

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

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

我们经常需要对一些图像素材添加一些场景特效，比如说各种天气，或者霓虹辉光效果等。

传统做法是使用一张透明的PNG图像覆盖在上面，但是使用PNG透明前景图有下面2个缺点：

1. 效果不自然，缺少那种跟底图完全融为一体的感觉；
2. 图片的尺寸实在是太大了，动不动就上百K；

现在，有了滤色模式模式，我们只要准备一张黑色底色的jpg图片就可以了，应用screen混合模式，不仅可以跟底图完全融为一体，且使用的前景图片的文件尺寸只有PNG图片的1/10。

例如我们有下面一张底图，森林和小鹿：

然后，有以下一些特效前景图：

分别和提供的底图进行混合，可以看到如下图所示的实时效果：

可以看到效果很棒很自然。而这里使用的前景素材尺寸300*400，尺寸仅20K左右，开销非常小。

还能应用于HTML video视频

滤色混合模式不仅可以作用于图像，还可以用于视频，同样的，只要我们把视频的底色做成黑色，就能很好得和网页背景融为一体。

例如这里有个网页截图，还有一个二次元风格的场景图：

然后还有两个黑色背景的视频特效素材，分别是礼花绽放和瓢泼大雨（视频不动请点击）：

通过设置video元素混合模式为screen，可以得到下面所示的精彩效果（视频不动请点击）：

为网页动效的实现增加了新的思路。

三、滤色混合模式的兼容性

滤色混合模式的兼容性还是很溜的，2014年底就开始支持，目前已经快5年了，按照手机的更新速度，只要你的产品不是国民级的，移动端是可以放心使用的。

由于Edge拥抱Chrome浏览器，因此，Edge75也是支持了，可以预见，10年后，等window7系统没有人使用的时候，PC端也可以绽放光彩了。[图片上传失败…(image-e92fad-1559029725292)]

无论在哪个语言中，无论是什么设计工具，滤色混合模式都是非常基础，非常常见的一种混合模式，如果你致力于在图形表现领域有所作为，一定要把这种模式的混合算法、特效以及应用场景记得滚瓜烂熟。

好了，本文内容就这些，感谢阅读！

标签：颜色,screen,模式,混合,mix,滤色,255
来源： https://blog.csdn.net/llll789789/article/details/97823304

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。