标签：
注意：只有使用最新版的谷歌浏览器、火狐浏览器，才能正确的显示本文中的演示。
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;
}
Multiply 正片叠底, 正如名称示意的，用混合颜色来增重基色，产生一种更深的颜色。用黑色正片叠底的结果是黑色，用白色正片叠底的结果是图片没有任何变化。
background-blend-mode: multiply;
Screen 滤色是两个像素色的逆向正片叠底。滤色和正片叠底正好相反，使用白色进行虑色会产生白色，使用黑色虑色的结果是图像没有变化。
background-blend-mode: screen;
Overlay 叠加是一种复杂的混合模式。颜色变深的程度依赖于基色：浅色变的更浅，深色变得更深。
background-blend-mode: overlay;
Darken 变暗, 让图片更暗。它会选择使用两个重叠的像素中颜色更深的那个。
background-blend-mode: darken;
跟变暗相反，lighten 变亮模式会选择另个叠加的像素中颜色较轻的那个。
background-blend-mode: lighten;
Color dodge 颜色减淡减小对比度使基色变亮以反映混合色。
background-blend-mode: color-dodge;
Color burn 颜色加深 跟颜色减淡相反，通过增加对比度使基色变暗以反映混合色。
background-blend-mode: color-burn;
Hard light 强光模式“强光”模式将产生一种强光照射的效果。如果“混合色”颜色“基色”颜色的像素更亮一些，那么“结果色”颜色将更亮；如果“混合色”颜色比“基色”颜色的像素更暗一些，那么“结果色”将更暗。
background-blend-mode: hard-light;
Soft light 柔光模式跟强光模式类似，“柔光”模式会产生一种柔光照射的效果。如果“混合色”颜色比“基色颜色的像素更亮一些，那么“结果色”将更亮；如果“混合色”颜色比“基色”颜色的像素更暗一些，那么“结果色”颜色将更暗，使图像的亮度反差增大。
background-blend-mode: soft-light;
Difference 差值模式 “差值”模式是将从图像中“基色”颜色的亮度值减去“混合色”颜色的亮度值，如果结果为负，则取正值，产生反相效果。由于黑色的亮度值为0，白色的亮度值为255，因此用黑色着色不会产生任何影响，用白色着色则产生被着色的原始像素颜色的反相。
background-blend-mode: difference;
Exclusion 排除模式与“差值”模式相似，但是具有高对比度和低饱和度的特点。比用“差值”模式获得的颜色要柔和、更明亮一些。
background-blend-mode: exclusion;
Hue 色相模式只用“混合色”颜色的色相值进行着色，而使饱和度和亮度值保持不变。当“基色”颜色与“混合色”颜色的色相值不同时，才能使用描绘颜色进行着色
background-blend-mode: hue;
Saturation 饱和度模式, “饱和度”模式的作用方式与“色相”模式相似，它只用“混合色”颜色的饱和度值进行着色，而使色相值和亮度值保持不变。当“基色”颜色与“混合色”颜色的饱和度值不同时，才能使用描绘颜色进行着色处理
background-blend-mode: saturation;
Color 颜色模式能够使用“混合色”颜色的饱和度值和色相值同时进行着色，而使“基色”颜色的亮度值保持不变。“颜色”模式模式可以看成是“饱合度”模式和“色相”模式的综合效果。该模式能够使灰色图像的阴影或轮廓透过着色的颜色显示出来，产生某种色彩化的效果。
background-blend-mode: color;
Luminosity 亮度模式能够使用“混合色”颜色的亮度值进行着色，而保持“基色”颜色的饱和度和色相数值不变。其实就是用“基色”中的“色相”和“饱和度”以及“混合色”的亮度创建“结果色”。此模式创建的效果是与“颜色”模式创建的效果相反
background-blend-mode: luminosity;
标签：
原文地址：http://www.cnblogs.com/aytsoft/p/4944017.html
