CSS混合模式

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

本文由韩聪根据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

中文译文:http://www.w3cplus.com/css3/basics-css-blend-modes.html

如需转载,烦请注明出处:https://www.w3cplus.com/css3/basics-css-blend-modes.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部