《转》15种CSS混合模式让图片产生使人惊艳的效果

浏览器支持

按照如今状况来说, 浏览器支持 CSSbackground-blend-mode属性还在不断的完善中。早期版本的浏览器目前还不支持，但caniuse.com报告说在Chrome，Firefox和Opera的最新版本都有良好的支持，使用Safari最快。

目前，基于Chromium的浏览器对CSS混和模式最为支持（background-blend-mode和mix-blend-mode都支持）。为了使Opera也支持，须要在opera地址栏中打开opera:flags，而后开启Enable experimental Web Platform features一项。对于Chrome，你须要经过chrome://flags开启一样的项目。

火狐如今不支持isolation属性，但你能够先享用其它属性，你须要打开about:config，而后搜索属性并开启。Safari和IE浏览器迄今仍不支持这些特性。

除非浏览器对其支持有所改善，最好仍是在你的设计中不要将CSS混和模式做为重要的部分，而只是做为既定设计中加强的效果。然而，出于演示的目的，你最好能在同时支持background-blend-mode和mix-blend-mode这两个属性的浏览器中打开连接内容。

background-blend-mode的工做原理

background-blend-mode属性指定了源元素应该怎样把本身的颜色同本身的背景图片和背景颜色混和起来。若是该元素下还有任何其它的层（例如一个使用蓝色背景颜色的section元素），它将不会把本身的颜色与该元素相混合。它只会把自身的颜色与CSS中为其指定的背景图像和颜色混和在一块儿。

以下例所示：

background-image: url(images/sample.png);
background-color: red;
background-blend-mode: multiply;

若是你正在使用的是多个背景图片，那么你能够分别为它们应用多个背景图片混和模式，例如：

background-image: url(images/sample1.png), url(images/sample2.png);
background-color: blue;
background-blend-mode: screen, overlay;

在上面的例子中， sample1.png图片将会应用screen混和模式，而 sample2.png会应用overlay模式。

怎样使用background-blend-mode属性

CSS3的候选推荐标准中也有一些混合模式的选项，但目前最有用的是背景混合模式 ：background-blend-mode。 该属性容许咱们混合两个图像，或一个图像和一个背景颜色。

实例以下所示：

<div class="blend"></div>

这个是基类:

.blend
{
        width:780px;
        height:539px;
        background:#3db6b8 url("lighthouse.jpg") no-repeat center center;
}

如今，咱们准备添加混合模式。

要作到这一点，咱们要添加另外一个类到咱们的div，例如“multiply”：

<div class="blend multiply"></div>

而后咱们将建立第二个样式规则：

.blend.multiply
 {
        background-blend-mode: multiply;
 }

若是你想看看全部的代码能够在这里下载源文件。替换里面的图片路径你就能够看到展现效果。

正片叠底模式（Multiply）

Multiply, 正如它的名字所暗示的，它以混合色的像素为基础，因此会出现较暗的颜色。 黑色叠加结果为黑色，白色叠加图像不变。

background-blend-mode: multiply;

 

屏幕模式/滤色(Screen)

与正片叠底模式相反，合成图层的效果是显现两图层中较高的灰阶，而较低的灰阶则不显现（即浅色出现，深色不出现），产生一幅更加明亮的图像。

background-blend-mode: screen;

 

叠加模式(Overlay)

Overlay 是一个复杂的混合模式。 实际效果取决于基色：浅色变得更浅，暗色变的更暗。

overlay混和模式既有screen中的像素颜色变浅效果，也有multiply中的像素颜色加深效果。究竟使用何种模式，取决于底层的色彩，合成后有些区域图变暗有些区域变亮

background-blend-mode: overlay;

 

变暗模式(Darken)

此模式的效果取决于源和背景颜色之间更深的（色彩），即混合两图层像素的颜色时，对这两者的RGB值（即RGB通道中的颜色亮度值）分别进行比较，取两者中低的值再组合成为混合后的颜色。

background-blend-mode: darken;

 

变亮模式(Lighten)

这个模式与darken相反，它的效果取决于源和背景颜色之间更浅的（色彩）。即将两像素的RGB值进行比较后，取高值成为混合后的颜色，于是总的颜色灰度级升高，形成变亮的效果。

background-blend-mode: lighten;

 

颜色减淡(Color-Dodge)

Color-Dodge模式加亮了背景颜色，从而造成鲜明对比的图像。它减淡亮基色下降对比度，以反映混合色。

background-blend-mode: color-dodge;

 

颜色加深(Color-Burn)

这种模式加深了背景色，而且增长了源和背景色彩的对比度。即让底层的颜色变暗，有点相似于正片叠底，但不一样的是，它会根据叠加的像素颜色相应增长底层的对比度。

background-blend-mode: color-burn;

 

强光模式(Hard-Light)

Hard light不管是multiply，或者screen 的颜色取决于混合色。这种模式与overlay相反。它在较浅的像素上使用multiply模式，而在较深的像素上使用screen模式。做用效果如同是打上一层色调强烈的光，因此称之为强光。

background-blend-mode: hard-light;

 

柔光模式(Soft-Light)

这种模式在较深像素上使用multiply模式，而在较浅像素上使用screen模式。与overlay有些类似，但有轻微的不一样。做用效果如同是打上一层色调柔和的光，于是被咱们称之为柔光。做用时将上层图像以柔光的方式施加到下层。

柔和的光线相似于强光线 ，但不是叠加或过滤的颜色，柔和的光线使用减淡和加深起了一个微妙的影响。

background-blend-mode: soft-light;

 

差值/差别模式(Difference)

要混合图层双方的RGB值中每一个值分别进行比较，用高值减去低值做为合成后的颜色，一般用白色图层合成一图像时，能够获得负片效果的反相图像。用黑色的话不发生任何变化（黑色亮度最低，下层颜色减去最小颜色值0，结果和原来同样），而用白色会获得反相效果（下层颜色被减去，获得补值），其它颜色则基于它们的亮度水平。

background-blend-mode: difference;

 

排除模式(Exclusion)

exclusion混和模式与difference模式相似，但产生的图像对比度更低一些。

background-blend-mode: exclusion;

 

色相/色调模式(Hue)

Hue取基色和混合色的颜色亮度和饱和度，并将它们合并。这种模式使用当前层的色相值去替换背景图像的色相值，而饱和度与亮度不变。

background-blend-mode: hue;

 

饱和度模式(Saturation)

Saturation， 就像hue同样，合并两个具备混合色属性的基本颜色值，而后进行饱和。

saturation用当前层的饱和度去替换背景图像的饱和度，而色相值与亮度不变。

background-blend-mode: saturation;

 

颜色模式(Color)

color兼有色相和饱和度两种模式，用当前层的色相值与饱和度替换背景图像的色相值和饱和度，而亮度保持不变。

background-blend-mode: color;

 

亮度/明度模式(Luminosity)

这种模式使用当前层的亮度值去替换背景图像的亮度值，而色相值与饱和度不变。该模式产生的效果与Color模式恰好相反，它根据上层颜色的明度分布来与下层颜色混合。

background-blend-mode: luminosity;

 

有些人可能以为不方便准确地记得每个混合模式的工做原理，因此咱们根据它们提供的通常效果，将它们分红几大类，这种方法是很是有用的。咱们能够将全部这些模式分为如下几类：

• 变暗(Darkening)：darken, multiply, 和 color-burn模式，各自会按本身的方式，将图像变暗。
• 变亮(Lightening)：lighten, screen 和 color-dodge模式，将图像变得更亮。
• 对比度(Contrast)：overlay, soft-light 和 hard-light模式，将改变图像对比度。
• 相对(Comparative)：difference 和 exclusion模式划分到这个类别中。
• 成分(Component)：hue, saturation, color 和 luminosity模式划分到这个类别中。其余混合模式独立做用于每一个颜色通道，而这个类中的模式则从源层挑出某一部分，而后把其它部分和背景层混和。

总结：

在网页中，混合模式很是适合用于建立不一样的效果，要是在之前，这种功能是使用Web技术没法给咱们的。这是一个即将到来的技术，并且，在写这篇文章的时候，浏览器的支持还不协调，但它只会随着时间的推移变得更好。您能够经过混和模式创造出一些精彩的调整和效果，因此在将来，你将再也不须要仅仅为了给页面中的图形元素添加某种效果，而启动一个照片编辑器的应用程序。

注：英文参考自15 CSS blend modes that will supercharge your images 和 Getting to know CSS Blend Modes