html与css怎么混合运用,CSS混合模式

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元素。比如在一个背景上覆盖一个

标题。或者甚至是文本之上覆盖文本。

下面这张图片是我有一天在机场看到的，之所以将它拍下来，是我认为它看起来整洁又灵巧，并且它涵盖了我想说明的意思——如何在web上实现这种效果：

第一次尝试重建它时，我使用了opacity。但是opacity淡化了色彩，并且重叠之后也显示不出来重叠部分应有得暗度。CJ Gammon 告诉我有一个混合属性可以实现这个效果：mix-blend-mode。

于是我这样重新定义了HTML：

hungry?

然后使用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背景上设置。例如：

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.globalCompositeOperation = 'multiply';

那个值可以是任何一个我在上文中列出的。下面是一个简单的演示：

另外一个奇妙的演示，在这个示例中您可以看到，混合模式让页面变得生动起来：

SVG混合模式

你可能会怀疑这一点，但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的值)证明支持，否则不是。然后可以是一个应用在元素上的类，由此你在CSS中的任何地方使用它来做一些调整，这类似Modernizr的方式。也许未来他们还会为此做一个测试。

如果在这种情况之下有更好的例子，请一定要告诉我。

关于韩聪

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

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

如需转载烦请注明出处：