实战CSS混合模式

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

去年年底看到Dudley Storey在他的一篇文章《2014年前端将会发生什么》一文中提到,如何在Web页面中实现类似于Photoshop制图软件中图层混合模式的效果,特别的激动。从而也知道CSS混合模式这样的一个概念,觉得特别有意思,加上这段时间看到相关的讨论,我也有点手痒痒,今天也将试试这一神技,给我们Web的效果带来什么样的变化。

什么是图层混合模式

什么是图层混合模式,其实我也解释不清楚。做为前端的页面仔,大家对Photoshop这样的制图软件一定不会陌生,在其软件中有一个图层混合模式,如下图所示:

实战CSS混合模式

近二十七种图层混合模式,不同的模式将得到不同的效果:

实战CSS混合模式

其实我们只需要简单的理解,图层混合模式就是几个层层叠在一起,然后采用不同的层叠方式,实现层叠效果。

实战CSS混合模式

浏览器兼容性

CSS混合模式可以用于HTML任何元素上,但此技术是一个较新的技术,也可以说是一个实验性的技术。所以目前浏览器对其支持性来说并不好,甚至可以说是极差。如果想看到下面实例中的效果,你必须通过一定的技术手段开启浏览器的实验性特性选择项。我们拿Chrome为例(写此教程我所用的版本 35.0.1916.114),在浏览器地址栏输入chrome://flags,然后将“启用实验性网络平台功能”选项中的“开启”按钮打开,打开之后,重启您的浏览器,此按钮会变成“停用”。如下图所示:

实战CSS混合模式

对于Opera浏览器,你将“opera:flags”打开,并开启相同的选择项,而对于Firefox浏览器,你需要通过“about:config”来开启相关选项。而Safari和IE浏览器到目前还不支持此功能。

另外CSS混合模式用于Canvas,SVG和img上,浏览器支持度并不一致。

Canvas混合模式

CSS图像混合模式

HTML元素和SVG混合模式

CSS混合模式种类

在Photoshop这样的制图软件中图层的混合模式有近27种,但在CSS混合模式中,目前仅有16种:normalmultiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity。其中每一种混合模式都有其自的计算模式,不过这一部分是非常枯燥的事情,在这里就不过多介绍,如果你感兴趣,可以点击这里进行详细了解。

那么每个混合模式具体起什么作用,我们简单来做一个对比:

Photoshop图层 CSS混合模式 中文名称 功能描述
normal normal 正常模式 混合色的像素会透过所用的颜色显示出来
multiply multiply 正片叠底模式 在“正片叠底”模式中,查看每个通道中的颜色信息,并将“基色”与“混合色”复合。
screen screen 滤色模式 “滤色”模式与“正片叠底”模式正好相反,它将图像的“基色”颜色与“混合色”颜色结合起来产生比两种颜色都浅的第三种颜色
overlay overlay 叠加模式 “叠加”模式把图像的“基色”颜色与“混合色”颜色相混合产生一种中间色。
darken darken 变暗模式 在“变暗”模式中,查看每个通道中的颜色信息,并选择“基色”或“混合色”中较暗的颜色作为“结果色”。
lighten lighten 变亮模式 在“变亮”模式中,查看每个通道中的颜色信息,并选择“基色”或“混合色”中较亮的颜色作为“结果色”。
color-dodge color-dodge 颜色减淡模式 在“颜色减淡”模式中,查看每个通道中的颜色信息,并通过减小对比度使基色变亮以反映混合色。与黑色混合则不发生变化。
color-burn color-burn 颜色加深模式 在“颜色加深”模式中,查看每个通道中的颜色信息,并通过增加对比度使基色变暗以反映混合色,如果与白色混合的话将不会产生变化。
hard-light hard-light 强光模式 “强光”模式将产生一种强光照射的效果。如果“混合色”颜色“基色”颜色的像素更亮一些,那么“结果色”颜色将更亮;如果“混合色”颜色比“基色”颜色的像素更暗一些,那么“结果色”将更暗。
soft-light soft-light 柔光模式 柔光”模式会产生一种柔光照射的效果。如果“混合色”颜色比“基色颜色的像素更亮一些,那么“结果色”将更亮;如果“混合色”颜色比“基色”颜色的像素更暗一些,那么“结果色”颜色将更暗,使图像的亮度反差增大。
difference difference 差值模式 在“差值”模式中,查看每个通道中的颜色信息,“差值”模式是将从图像中“基色”颜色的亮度值减去“混合色”颜色的亮度值,如果结果为负,则取正值,产生反相效果。
exclusion exclusion 排除模式 “排除”模式与“差值”模式相似,但是具有高对比度和低饱和度的特点。比用“差值”模式获得的颜色要柔和、更明亮一些。
hue hue 色相模式 “色相”模式只用“混合色”颜色的色相值进行着色,而使饱和度和亮度值保持不变。
saturation saturation 饱和度模式 “饱和度”模式的作用方式与“色相”模式相似,它只用“混合色”颜色的饱和度值进行着色,而使色相值和亮度值保持不变。
color color 颜色模式 “颜色”模式能够使用“混合色”颜色的饱和度值和色相值同时进行着色,而使“基色”颜色的亮度值保持不变。“颜色”模式模式可以看成是“饱合度”模式和“色相”模式的综合效果。
luminosity luminosity 亮度模式 “亮度”模式能够使用“混合色”颜色的亮度值进行着色,而保持“基色”颜色的饱和度和色相数值不变。其实就是用“基色”中的“色相”和“饱和度”以及“混合色”的亮度创建“结果色”。

理论上的东西,着实让人感到很烦,为了能更好的使用CSS的混合模式,我们可以将其分为几个大类:

分类名称 混合模式名称 描述
基础混合模式 normal 利用图层透明度和不透明度来控制与下面的图层混合
降暗混合模式 darken,multipl
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css-blend-modes.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部