开始了解CSS混合模式

本文由韩聪根据Shwetank Dixit的《Getting to know CSS Blend Modes》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明原作者相关信息http://dev.opera.com/articles/getting-to-know-css-blend-modes/。

——作者：Shwetank Dixit

——译者：韩聪

CSS混合模式提供了一种用于规定层与层之间如何相互影响及混合的方法。迄今为止，这属于图片编辑应用软件领域，但现在开始，这种混合模式可以通过CSS在web中实现！

什么是CSS混合模式

如果你曾经广泛地使用过图片编辑应用软件（例如，Adobe Photoshop，Pixelmator，GIMP等），那么你可能对混合模式比较熟悉。如同名称中所暗示的，混合模式是指将上层的图像融入下层图像时采用的各种模式。根据您所选择的模式，你会看到不同的融合后的效果。

这些混合模式，现已 Compositing and Blending Level 1说明文档被添加在CSS中。混合模式被用来指定一个特定的颜色将如何融合到背景层的颜色中。其结果可能十分有趣。

混合模式的工作方式

混合模式主要是一组不同的方式，这些方式用来确定当一个元素与另一个（部分或完全地）重叠时，图像的最终色彩应该是怎样的。本质上，这些模式就是源层和背景层颜色用数学表达的函数——例如RGBA，其中所有通道的值都在0和1之间——每一个特定的像素返回一个最终的数学值，最终确定该像素的颜色。每个混合模式用来确定颜色所使用的精确公式可以参考规范。现在，我们就来看看CSS中提供的不同混合模式分别产生了什么样的效果。

CSS中不同的混合模式的效果

正常模式(Normal)

通过Normal混合模式产生的图像不会添加任何可视效果，即使用时用当前图层像素的颜色覆盖下层颜色。

正片叠底模式(Multiply)

正如其名称所暗示的，multiply 混合模式将源图像和背景图像的颜色相乘，从而获得最终的颜色。这通常会导致图像变暗。

屏幕模式/滤色(Screen)

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

叠加模式(Overlay)

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

变暗模式(Darken)

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

变亮模式(Lighten)

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

颜色减淡(Color-Dodge)

Color-Dodge模式加亮了背景颜色，从而形成鲜明对比的图像。

颜色加深(Color-Burn)

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

强光模式(Hard-Light)

这种模式与overlay相反。它在较浅的像素上使用multiply模式，而在较深的像素上使用screen模式。作用效果如同是打上一层色调强烈的光，所以称之为强光。

柔光模式(Soft-Light)

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

色相/色调模式(Hue)

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

饱和度模式(Saturation)

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

颜色模式(Color)

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

亮度/明度模式(Luminosity)

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

差值/差异模式(Difference)

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

排除模式(Exclusion)

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

有些人可能觉得不方便准确地记得每一个混合模式的工作原理，所以我们根据它们提供的一般效果，将它们分成几大类，这种方法是非常有用的。我们可以将所有这些模式分为以下几类：

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

在网上介绍Photoshop图层混合模式的教程中截取了一张介绍图层混合模式的图片，虽然此处介绍CSS中图层混合模式，但他们有异曲同工之处。

上图截取《Photoshop中高级进阶系列之一——图层混合模式原理(原创理论)》一文中。

有关于图层混合模式更专业的介绍，可以阅读有关于介绍Photoshop制作软件中图层混合模式的相关文章：

• After Effects / 混合模式和图层样式
• 带你认识Photoshop的混合模式
• Photoshop图层混合(Layer Blending)模式的算法实现
• PS图层混合模式实例详解

使用mix-blend-mode属性

mix-blend-mode属性规定了源元素如何将颜色和背景混和起来。背景可以是源元素之下的任何元素（例如，一个标题是一个源元素，而包裹自己的div容器是背景元素）。使用方法很简单：

mix-blend-mode: difference

或者：

mix-blend-mode: overlay

等等。注意它可以作用于任何元素上。如果你为一个元素应用了mix-blend-mode属性，它会把自己的颜色和任意跟它叠加在一起的元素混和起来。可以在《two images blending with each other》一文中查看实例。

使用isolation属性

如果你使用了mix-blend-mode，它会把当前元素和所有在其下方重叠的背景元素都混和起来。如果你想让一组元素在一个<div>容器中互相混和，而不影响其它下方重叠的元素呢？

如果你通过isolation属性来隔离那个<div>容器，例如：

div {
    isolation: isolate;
}

这个定义创建了一个新的堆叠背景，只有在这个堆叠背景中的元素才会进行混和，之下的其它元素都不会发生混和。

这里有使用了mix-blend-mode和isolate属性的一个演示。其中，我们在包含图片的<div>上应用了isolation属性。如果我们不使用isolation属性，那么它也会混和到图片下方的层。您可以通过勾选复选框来查看不同情况下出现的不同效果。

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模式。

混和模式使用技巧

渐变

您也可以在自己的设计中，把使用所有这些模式与渐变和蒙板结合起来，以实现一些有趣的效果。我所见到过的最有才的例子是在图片上添加径向渐变。例如下面的图像：

你可以打开案例看到上述效果的演示。我们在该演示中做的仅仅是添加一个透明到黑色的径向渐变（如果是线性渐变，从透明至黄色），并在上面放置了一幅图像，然后为其应用multiply混和模式，即mix-blend-mode: multiply。当用户将鼠标悬停在图片上，我们使用mix-blend-mode: normal来删除混和效果。

蒙板，动画和滤镜

一个简单的（有些人会说显然的！）需要记住的要点是，当你在使用蒙板时，蒙板层将是最高一层的堆叠背景。这意味着你需要确保，无论你想混合多少层，都要使这些层通过蒙板可见。

混合模式也可以配合动画元素进行工作，尽管它们自己并不能设置动画属性。在这个案例中，我们配合CSS蒙板和动画使用了混合模式。请注意，我们已经应用了一个单独的mix-blend-mode来混合文本和图像。您甚至可以添加CSS滤镜来融合图像，以便进一步调整和优化您的设计。

视频

虽然我们在文章中更关注图像，但使用mix-blend-mode属性，混合模式也可以应用到视频中。如果你在视频上面添加混合的图像或文本，您就可以创建一些复杂的效果或演示。这进一步增强了你使用这些混和模式的可能性。

Canvas中使用混合模式

通过Canvas 2D Context API，混合模式也可以在<canvas>中实现。您需要做的仅仅是将canvas 2d内容的globalCompositeOperation属性设置为任何你喜欢的混合模式。

很多时候你可能想通过调整不透明度——在canvas中则是设置globalAlpha属性——对图像进行进一步控制。

例如：

var canvas = document.querySelector('canvas');
var context = getContext('2d');
// Everything drawn on this context will now have
// a “screen” blend mode applied to it.
context.globalCompositeOperation = 'screen';
// Drawn elements will have an alpha channel of 0.7
context.globalAlpha = 0.7;

通过globalCompositeOperator，我已经实现了几个canvas中使用混和模式的小示例，你可以看看。另外您也可以看看Adobe写给新手必看的，他们在这方面作了更多的讨论。

SVG中使用混和模式

规范中也允许你通过CSS在SVG文档中添加混和模式。

<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        rect {
            mix-blend-mode: multiply;
        }
    </style>
    <rect x="10" y="10" width="100" height="100" rx="15" ry="15" fill="#ff0000"/>
    <rect x="40" y="40" width="100" height="100" rx="15" ry="15" fill="green"/>
</svg>

当然，在SVG里，你也可以使用feImage和feBlend来添加混和模式，但最好的方式还是使用CSS来控制，因为它更为方便。

浏览器支持状况

目前，基于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这两个属性的浏览器中打开链接内容。 Adobe的Web平台团队维护着一个各种浏览器对混和模式的支持详情页面，非常详细地对此作了说明。

混和模式功能测试

通过功能测试使用混合模式是很重要的。您可以使用如下JavaScript方法同时检测mix-blend-mode和background-blend-mode地支持情况：

if ('CSS' in window && 'supports' in window.CSS) {
    var supportsMixBlendMode = window.CSS.supports('mix-blend-mode', 'multiply');
    var supportsBackgroundBlendMode = window.CSS.supports('background-blend-mode', 'multiply');
    var supportsIsolation = window.CSS.supports('isolation', 'isolate');
    …
}

如果支持，它将返回true，否则false。

然而，最健全地方案是使用Modernizr地testProp()，从功能上进行测试，例如：

var mixBlendModeSupport = Modernizr.testProp('mixBlendMode');
var backgroundBlendModeSupport = Modernizr.testProp('backgroundBlendMode');
var isolationSupport = Modernizr.testProp('isolation');

如果浏览器支持，它将返回true，否则false。

你也可以使用@supports来区分是否加载样式，例如：

@supports(mix-blend-mode: screen) {
    …
}

如果你想确定是否同时支持mix-blend-mode和background-blend-mode属性，你可以这样写：

@supports((mix-blend-mode: screen) and (background-blend-mode: screen)) {
    …
}

结论

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

扩展阅读

• CSS混合模式
• Web设计中的CSS混合模式
• CSS Compositing and Blending Level 1
• Page for Blending and Compositing
• Blending features in Canvas
• The Basics of CSS Blend Modes

关于韩聪

中标软件开源社区部项目助理，爱生活，略迷茫，在web前端攻城狮的道路上匍匐前进。个人博客、新浪微博，追梦的旅途中，愿与你同行。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文出处：http://dev.opera.com/articles/getting-to-know-css-blend-modes

中文译文：http://www.w3cplus.com/css3/getting-to-know-css-blend-modes.html