本文由韩聪根据chriscoyier的《Basics of CSS Blend Modes》所译，整个系列共分四章，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明原作者相关信息http://css-tricks.com/basics-css-blend-modes。
——作者：chriscoyier
——译者：韩聪
Bennett Feely一直在向人们展示CSS混合模式的特性方面做了很好的工作。过去，在Photoshop的帮助下，静态页面可以比使用动态内容的页面显示出更丰富的设计效果，不过，在CSS混合模式获得了更好的支持以后，这种状况将会得到改善。因为这并不是一件多么枯燥的事情，我很想看到不同的实现方式。
CSS多背景混合模式
你可以将多种背景图片（background-image），或者背景图片与颜色（background-color）混合起来使用。简单使用方法如下：
blended {
background-image: url(face.jpg);
background-color: red;
background-blend-mode: multiply;
}
Multiply是一个很棒而且有用的设置，除此之外仍然可以选择：screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color,和luminosity. normal则可以重置样式。
使用Adobe创建了混合模式效果：
一个单独的元素可以拥有一个以上的背景图片叠起来，如：
.graphic-or-whatever {
background:
url(grid.png),
url(building.jpg)
}
通过为它们添加一个background-blend-mode.样式，可以将背景轻松混合。
这里有一个Bennett Feely制作的很酷而且实用的例子：
下面是另一个，它巧妙地将一个彩色图像分别与青色/品红色/黄色/黑色进行了重组。你应该知道在平版印刷工作中它会是怎样的效果吧？=）
任意的HTML元素混合模式
将背景混合起来的确非常酷，但我个人认为，相比之下我更喜欢随心所欲地混合HTML元素。比如在一个背景上覆盖一个<h1>标题。或者甚至是文本之上覆盖文本。
下面这张图片是我有一天在机场看到的，之所以将它拍下来，是我认为它看起来整洁又灵巧，并且它涵盖了我想说明的意思——如何在web上实现这种效果：
第一次尝试重建它时，我使用了opacity。但是opacity淡化了色彩，并且重叠之后也显示不出来重叠部分应有得暗度。CJ Gammon 告诉我有一个混合属性可以实现这个效果：mix-blend-mode。
于是我这样重新定义了HTML：
<h1>hungry?</h1>
然后使用Lettering.js将其分割成字母：
$("h1").lettering();
接着，使用负的letter-spacing值使字母重合起来，设置mix-blend-mode样式和字体颜色。
h1 {
font-size: 7rem;
font-weight: 700;
letter-spacing: -1.25rem;
}
h1 span {
mix-blend-mode: multiply;
}
h1 span:nth-child(1) {
color: rgba(#AB1795, 0.75);
}
/* etc, on coloring */
比较：
正如我提过的，web文本覆盖在图像上面是一个非常不错的主意：
Canvas混合模式
虽然我对DOM混合模式很感兴趣，不过应该注意，<canvas>也有其混合模式，并且它需要一点儿深层次的支持（如下所示）。
在canvas背景上设置。例如：
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'multiply';
那个值可以是任何一个我在上文中列出的。下面是一个简单的演示：
另外一个奇妙的演示，在这个示例中您可以看到，混合模式让页面变得生动起来：
SVG混合模式
你可能会怀疑这一点，但SVG的确有一套自己的机制来实现。一种方式是在<svg>中进行定义，但这种方法非常复杂。
<svg>
<defs>
<filter id="f1" x="0" y="0" width="1" height="1">
<feImage xlink:href="#p1" result="p1"/>
<feImage xlink:href="#p2" result="p2"/>
<feBlend mode="multiply" in="p1" in2="p2" />
</filter>
<path id="p1" d='M100 100 L200 100 L200 200 L100 200 Z' fill='#00FFFF'/>
<path id="p2" d='M150 150 L250 150 L250 250 L150 250 Z' fill='#CC3300'/>
</defs>
<rect width="100%" height="100%" filter="url(#f1)"/>
</svg>
一个更加复杂的例子。
好消息是，mix-blend-mode将会在行内SVG中生效。因此如果你想通过上述方式使用SVG，可以通过类或者其它什么来选择形状，然后随心所欲地定义混合模式。这儿有一个Bennet写的例子，正好用到了它：
浏览器支持
Canvas：Firefox 20+, Chrome 30+, Safari 6.1+, Opera 17+, iOS 7+, Android 4.4+.糟糕的消息：IE不支持。
HTML/CSS：Firefox 30+, Chrome 35+, Safari 6.1（似乎不是7？）。没有canvas那么好的支持性。
对于Chrome，你需要运行Canary，在浏览器中打开chrome://flags/，然后开启"experimental Web Platform features"这一项。
这真的有一点儿复杂，因此如果你确实想深入研究它，了解浏览器对它的支持性，可以查看来自Adobe的Support Matrix。
渐进式增强
混合模式的好处是整体实现了设计的效果，然而如果这种模式不被支持，你需要确保这种情况下页面仍然可读。如下是渐进式增强的整体方案。
这是Jeremy Keith的a 一个想法：
这是完全有可能的，不仅如此，还可以使用那些很久以前每一个浏览器都支持的功能。这就是我们如何推动网络向前发展。
所以测试混和效果是否被支持的方法之一是，在不支持这种模式的浏览器中进行检测，如果它仍然可读/可用，那很棒，你不需要采取进一步措施。
若测试结果最终无法读取/不可用，你可以调整周围的事物直到可行，或者运行一个测试实例以确定是否支持，然后为非支持情况实施具体的措施。
为了测试是否支持，我想你可以对使用到的属性进行测试：
var supportsMixBlendMode = window.getComputedStyle(document.body).mixBlendMode;
var supportsBackgroundBlendMode = window.getComputedStyle(document.body).backgroundBlendMode;
如果返回值是“正常”（或其它非 undefined的值）证明支持，否则不是。然后可以是一个应用在<html>元素上的类，由此你在CSS中的任何地方使用它来做一些调整，这类似Modernizr的方式。也许未来他们还会为此做一个测试。
如果在这种情况之下有更好的例子，请一定要告诉我。
关于韩聪
中标软件开源社区部项目助理，爱生活，略迷茫，在web前端攻城狮的道路上匍匐前进。个人博客、新浪微博，追梦的旅途中，愿与你同行。
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
如需转载烦请注明出处：
英文出处：http://css-tricks.com/basics-css-blend-modes
中文译文：http://www.w3cplus.com/css3/basics-css-blend-modes.html