去年年底看到Dudley Storey在他的一篇文章《2014年前端将会发生什么》一文中提到，如何在Web页面中实现类似于Photoshop制图软件中图层混合模式的效果，特别的激动。从而也知道CSS混合模式这样的一个概念，觉得特别有意思，加上这段时间看到相关的讨论，我也有点手痒痒，今天也将试试这一神技，给我们Web的效果带来什么样的变化。
什么是图层混合模式
什么是图层混合模式，其实我也解释不清楚。做为前端的页面仔，大家对Photoshop这样的制图软件一定不会陌生，在其软件中有一个图层混合模式，如下图所示：
近二十七种图层混合模式，不同的模式将得到不同的效果：
其实我们只需要简单的理解，图层混合模式就是几个层层叠在一起，然后采用不同的层叠方式，实现层叠效果。
浏览器兼容性
CSS混合模式可以用于HTML任何元素上，但此技术是一个较新的技术，也可以说是一个实验性的技术。所以目前浏览器对其支持性来说并不好，甚至可以说是极差。如果想看到下面实例中的效果，你必须通过一定的技术手段开启浏览器的实验性特性选择项。我们拿Chrome为例(写此教程我所用的版本 35.0.1916.114),在浏览器地址栏输入chrome://flags，然后将“启用实验性网络平台功能”选项中的“开启”按钮打开，打开之后，重启您的浏览器，此按钮会变成“停用”。如下图所示：
对于Opera浏览器，你将“opera:flags”打开，并开启相同的选择项，而对于Firefox浏览器，你需要通过“about:config”来开启相关选项。而Safari和IE浏览器到目前还不支持此功能。
另外CSS混合模式用于Canvas，SVG和img上，浏览器支持度并不一致。
Canvas混合模式
CSS图像混合模式
HTML元素和SVG混合模式
CSS混合模式种类
在Photoshop这样的制图软件中图层的混合模式有近27种，但在CSS混合模式中，目前仅有16种：normal，multiply,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
扫一扫
6398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
