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

栏目: CSS · 发布时间: 5年前

内容简介:byzhangxinxu from本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。建议在非IE浏览器下浏览本文,否则很多实时渲染效果看不到,影响阅读。

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8661

本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。

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

一、滤色screen混合模式速览

screen 混合模式,国内称为“滤色”,其计算公式是: 深入理解CSS mix-blend-mode滤色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) ,也就是下面这个色块的颜色 如果没有色块显示,请访问原文地址https://www.zhangxinxu.com/wordpress/?p=8661

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

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

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

以下是一些直观的特性:

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

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

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

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

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

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

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

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

然后,有以下一些特效前景图:

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

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

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

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

还能应用于HTML video视频

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

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

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

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

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

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

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

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

由于Edge拥抱Chrome浏览器,因此,Edge75也是支持了,可以预见,10年后,等window7系统没有人使用的时候,PC端也可以绽放光彩了。 深入理解CSS mix-blend-mode滤色screen混合模式

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

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

好了,本文内容就这些,感谢阅读!

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

本文为原创文章,欢迎分享,勿全文转载,如果内容你实在喜欢,可以加入收藏夹,永不过期,而且还会及时更新知识点以及修正错误,阅读体验也更好。

本文地址: https://www.zhangxinxu.com/wordpress/?p=8661

(本篇完)


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序与法治

程序与法治

孙洪坤 / 中国检察 / 2008-3 / 28.00元

《程序与法治》是系统和全面地研究程序与法治国家建设思想的学术专著,《程序与法治》对程序与法治的若干重大理论与现实问题进行了深入的探讨,如:从法社会学的视角研究程序正义在中国的可适应性问题;程序正义的中国语境;正当程序的宪政价值与构造;正当程序的文化底蕴;中国刑事程序正当化设计的标准、设计的基调、设计的视角;等等。尽管其中某些问题的研究尚待进一步深入,但这些问题的提出有利于开阔我们研究程序法理论的视......一起来看看 《程序与法治》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试