注意：只有使用最新版的谷歌浏览器、火狐浏览器，才能正确的显示本文中的演示。

Photoshop里最没有用处的一种功能——但也有人说是使其超出竞争对手的一种功能——就是混合模式(blend mode)。混合模式是指两个像素点叠落到一起，用不同的方法混合它们的颜色。比如，darken颜色混合模式，就是选择两个像素中颜色更深的一个输出。当将混合模式运用到整张图片上时，会产生让人惊讶的效果。

虽然并不是Adobe的Photoshop发明了混合模式，但它的实现效果是最真实的。可现在，你不需要使用Photoshop来运用混合模式美化你的图片，因为CSS3里提供里动态的实现这种效果的方法。

浏览器支持情况

做为CSS3的新特征之一，各种浏览器对background-blend-mode属性的支持情况还在改进中。对于早期的浏览器，需要在CSS里使用浏览器引擎前缀，或激活实验性设置。根据caniuse.com报告显示，Firefox 30，Chrome 35，Opera 22都是已经支持这个特征。

虽然IE现在仍然没有实现对混合模式的支持，但混合模式是一种非常好的提高页面美观的工具，我们可以考虑在页面中使用它。

background-blend-mode的用法

CSS3里提供了大量的混合模式的用法，但对于我们来说最有用处的一种用法是使用background-blend-mode。这个属性能让我们混合两张图片或混合一个图片和一种背景色。

在下面的演示中我们将使用如下代码：

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

使用的CSS：

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

下面我们就可以添加混合模式效果了。

我们需要添加另外一个CSS类，比如对于“multiply”模式：

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

然后我们再写一个CSS规则：

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

1、Multiply 正片叠底

Multiply 正片叠底, 正如名称示意的，用混合颜色来增重基色，产生一种更深的颜色。用黑色正片叠底的结果是黑色，用白色正片叠底的结果是图片没有任何变化。

background-blend-mode: multiply;

2、Screen 滤色

Screen 滤色是两个像素色的逆向正片叠底。滤色和正片叠底正好相反，使用白色进行虑色会产生白色，使用黑色虑色的结果是图像没有变化。

background-blend-mode: screen;

3、Overlay 叠加

Overlay 叠加是一种复杂的混合模式。颜色变深的程度依赖于基色：浅色变的更浅，深色变得更深。

background-blend-mode: overlay;

4、Darken 变暗

Darken 变暗, 让图片更暗。它会选择使用两个重叠的像素中颜色更深的那个。

background-blend-mode: darken;

5、Lighten 变亮

跟变暗相反，lighten 变亮模式会选择另个叠加的像素中颜色较轻的那个。

background-blend-mode: lighten;

6、Color dodge 颜色减淡

Color dodge 颜色减淡减小对比度使基色变亮以反映混合色。

background-blend-mode: color-dodge;

7、Color burn 颜色加深

Color burn 颜色加深 跟颜色减淡相反，通过增加对比度使基色变暗以反映混合色。

background-blend-mode: color-burn;

8、Hard light 强光模式

Hard light 强光模式“强光”模式将产生一种强光照射的效果。如果“混合色”颜色“基色”颜色的像素更亮一些，那么“结果色”颜色将更亮；如果“混合色”颜色比“基色”颜色的像素更暗一些，那么“结果色”将更暗。

background-blend-mode: hard-light;

9、Soft light 柔光模式

Soft light 柔光模式跟强光模式类似，“柔光”模式会产生一种柔光照射的效果。如果“混合色”颜色比“基色颜色的像素更亮一些，那么“结果色”将更亮；如果“混合色”颜色比“基色”颜色的像素更暗一些，那么“结果色”颜色将更暗，使图像的亮度反差增大。

background-blend-mode: soft-light;

10、Difference 差值模式

Difference 差值模式 “差值”模式是将从图像中“基色”颜色的亮度值减去“混合色”颜色的亮度值，如果结果为负，则取正值，产生反相效果。由于黑色的亮度值为0，白色的亮度值为255，因此用黑色着色不会产生任何影响，用白色着色则产生被着色的原始像素颜色的反相。

background-blend-mode: difference;

11、Exclusion 排除模式

Exclusion 排除模式与“差值”模式相似，但是具有高对比度和低饱和度的特点。比用“差值”模式获得的颜色要柔和、更明亮一些。

background-blend-mode: exclusion;

12、Hue 色相模式

Hue 色相模式只用“混合色”颜色的色相值进行着色，而使饱和度和亮度值保持不变。当“基色”颜色与“混合色”颜色的色相值不同时，才能使用描绘颜色进行着色

background-blend-mode: hue;

13、Saturation 饱和度模式

Saturation 饱和度模式, “饱和度”模式的作用方式与“色相”模式相似，它只用“混合色”颜色的饱和度值进行着色，而使色相值和亮度值保持不变。当“基色”颜色与“混合色”颜色的饱和度值不同时，才能使用描绘颜色进行着色处理

background-blend-mode: saturation;

14、Color 颜色模式

Color 颜色模式能够使用“混合色”颜色的饱和度值和色相值同时进行着色，而使“基色”颜色的亮度值保持不变。“颜色”模式模式可以看成是“饱合度”模式和“色相”模式的综合效果。该模式能够使灰色图像的阴影或轮廓透过着色的颜色显示出来，产生某种色彩化的效果。

background-blend-mode: color;

15、Luminosity 亮度模式

Luminosity 亮度模式能够使用“混合色”颜色的亮度值进行着色，而保持“基色”颜色的饱和度和色相数值不变。其实就是用“基色”中的“色相”和“饱和度”以及“混合色”的亮度创建“结果色”。此模式创建的效果是与“颜色”模式创建的效果相反

background-blend-mode: luminosity;

未经允许请勿转载：程序喵 » 15种CSS3混合模式让图片产生令人惊艳的效果