CSS混合模式

发布于韩聪

10 年前

本文由韩聪根据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上实现这种效果：

CSS混合模式

第一次尝试重建它时，我使用了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

中文译文：https://www.fedev.cn/css3/basics-css-blend-modes.html

jordan retro 11 mens mens