注意：只有使用最新版的谷歌浏览器、火狐浏览器，才能正确的显示本文中的演示。css3
Photoshop里最没有用处的一种功能——但也有人说是使其超出竞争对手的一种功能——就是混合模式(blend mode)。混合模式是指两个像素点叠落到一块儿，用不一样的方法混合它们的颜色。好比，darken颜色混合模式，就是选择两个像素中颜色更深的一个输出。当将混合模式运用到整张图片上时，会产生让人惊讶的效果。web
虽然并非Adobe的Photoshop发明了混合模式，但它的实现效果是最真实的。可如今，你不须要使用Photoshop来运用混合模式美化你的图片，由于CSS3里提供里动态的实现这种效果的方法。浏览器
浏览器支持状况
作为CSS3的新特征之一，各类浏览器对background-blend-mode属性的支持状况还在改进中。对于早期的浏览器，须要在CSS里使用浏览器引擎前缀，或激活实验性设置。根据caniuse.com报告显示，Firefox 30，Chrome 35，Opera 22都是已经支持这个特征。wordpress
虽然IE如今仍然没有实现对混合模式的支持，但混合模式是一种很是好的提升页面美观的工具，咱们能够考虑在页面中使用它。工具
background-blend-mode的用法
CSS3里提供了大量的混合模式的用法，但对于咱们来讲最有用处的一种用法是使用background-blend-mode。这个属性能让咱们混合两张图片或混合一个图片和一种背景色。性能
在下面的演示中咱们将使用以下代码：url
<div class="blend lazy "></div>
使用的CSS：spa
.blend
{ width:782px; height:540px; background:#3db6b8 url("lighthouse.jpg") no-repeat center center; }
下面咱们就能够添加混合模式效果了。3d
咱们须要添加另一个CSS类，好比对于“multiply”模式：
<div class="blend multiply lazy "></div>
而后咱们再写一个CSS规则：
.blend.multiply
{ background-blend-mode: multiply; }
Multiply 正片叠底
Multiply 正片叠底, 正如名称示意的，用混合颜色来增重基色，产生一种更深的颜色。用黑色正片叠底的结果是黑色，用白色正片叠底的结果是图片没有任何变化。
background-blend-mode: multiply;
Screen 滤色
Screen 滤色是两个像素色的逆向正片叠底。滤色和正片叠底正好相反，使用白色进行虑色会产生白色，使用黑色虑色的结果是图像没有变化。
background-blend-mode: screen;
Overlay 叠加
Overlay 叠加是一种复杂的混合模式。颜色变深的程度依赖于基色：浅色变的更浅，深色变得更深。
background-blend-mode: overlay;
Darken 变暗
Darken 变暗, 让图片更暗。它会选择使用两个重叠的像素中颜色更深的那个。
background-blend-mode: darken;
Lighten 变亮
跟变暗相反，lighten 变亮模式会选择另个叠加的像素中颜色较轻的那个。
background-blend-mode: lighten;
Color dodge 颜色减淡
Color dodge 颜色减淡减少对比度使基色变亮以反映混合色。
background-blend-mode: color-dodge;
Color burn 颜色加深
Color burn 颜色加深 跟颜色减淡相反，经过增长对比度使基色变暗以反映混合色。
background-blend-mode: color-burn;
Hard light 强光模式
Hard light 强光模式“强光”模式将产生一种强光照射的效果。若是“混合色”颜色“基色”颜色的像素更亮一些，那么“结果色”颜色将更亮；若是“混合色”颜色比“基色”颜色的像素更暗一些，那么“结果色”将更暗。
background-blend-mode: hard-light;
Soft light 柔光模式
Soft light 柔光模式跟强光模式相似，“柔光”模式会产生一种柔光照射的效果。若是“混合色”颜色比“基色颜色的像素更亮一些，那么“结果色”将更亮；若是“混合色”颜色比“基色”颜色的像素更暗一些，那么“结果色”颜色将更暗，使图像的亮度反差增大。
background-blend-mode: soft-light;
Difference 差值模式
Difference 差值模式 “差值”模式是将从图像中“基色”颜色的亮度值减去“混合色”颜色的亮度值，若是结果为负，则取正值，产生反相效果。因为黑色的亮度值为0，白色的亮度值为255，所以用黑色着色不会产生任何影响，用白色着色则产生被着色的原始像素颜色的反相。
background-blend-mode: difference;
Exclusion 排除模式
Exclusion 排除模式与“差值”模式类似，可是具备高对比度和低饱和度的特色。比用“差值”模式得到的颜色要柔和、更明亮一些。
background-blend-mode: exclusion;
Hue 色相模式
Hue 色相模式只用“混合色”颜色的色相值进行着色，而使饱和度和亮度值保持不变。当“基色”颜色与“混合色”颜色的色相值不一样时，才能使用描绘颜色进行着色
background-blend-mode: hue;
Saturation 饱和度模式
Saturation 饱和度模式, “饱和度”模式的做用方式与“色相”模式类似，它只用“混合色”颜色的饱和度值进行着色，而使色相值和亮度值保持不变。当“基色”颜色与“混合色”颜色的饱和度值不一样时，才能使用描绘颜色进行着色处理
background-blend-mode: saturation;
Color 颜色模式
Color 颜色模式可以使用“混合色”颜色的饱和度值和色相值同时进行着色，而使“基色”颜色的亮度值保持不变。“颜色”模式模式能够当作是“饱合度”模式和“色相”模式的综合效果。该模式可以使灰色图像的阴影或轮廓透过着色的颜色显示出来，产生某种色彩化的效果。
background-blend-mode: color;
Luminosity 亮度模式
Luminosity 亮度模式可以使用“混合色”颜色的亮度值进行着色，而保持“基色”颜色的饱和度和色相数值不变。其实就是用“基色”中的“色相”和“饱和度”以及“混合色”的亮度建立“结果色”。此模式建立的效果是与“颜色”模式建立的效果相反
background-blend-mode: luminosity;