前端开发者学堂 - fedev.cn

Web设计中的CSS混合模式

#译文#CSS混合模式
发布于 大漠

本文由大漠根据的《CSS Blend Modes could be the next big thing in Web Design》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：https://medium.com/p/6b51bf53743a，以及作者相关信息

——作者：

——译者：大漠

使用过Photoshop或Illustrator的人都清楚里面有一个图层的混合模式。

Web设计中的CSS混合模式

例如：Multiply, screen, overlay 和 soft light等等，使用这些混合模式，配上一定的透明度，让你的效果更佳。然而，Web设计师能掌握好“混合模式”就能制作出好的页面吗？对的，透明度opacity，就是他。

酷的东西并不难，如果要将这些效果用CSS实现出来还是有难度的，或者是有点不可能。如下图效果，第一行从左到右依次是：Doublenaut, Graham Hicks, Jonathan Quintin和Geoff Teehan。第二行从左向右依次是：Ben Johnson, Claire Morales, Alan Defibaugh和Jess Barlow。

2014年前端将会发生什么

混合模式和Web页面

值得可惜的是，不能有更多的混合模式像opacity属性得到众多浏览器的支持，事实也证明，要让浏览器实现类似于Photoshop中图层混合模式的效果还是一件难以完成的任务。有一些混合模式通过滤镜在SVG中是可用的，但这些都是有限的，在实际项目中用到并不多见。

尽管这样，事情正在快速往好的方面发展，现在在制定有关于CSS混合模式规范的草案。Adobe Web平台团队正在大力推广CSS混合模式。（这个团队还在推广其他一些有兴趣的CSS特性，如Regions和Shaders）。

眼下，有关于CSS混合模式规范草案中提供了三个属性：background-blend-mode，mix-blend-mode和isolation。让我们一起来探索他们。

Canvas 2D: 他会有混合模式?

Web设计中的CSS混合模式

首先，这里有一个小秘密。混合模式在HTML5的Canvas中的应用除了在IE浏览器的其他所有最新浏览器都得到支持。甚至在移动端的Chrome和Safari的浏览器上也得到支持。但是我们为什么要停止呢？混合模式在CSS中非常有用。

CSS的混合模式：background-blend-mode

Web设计中的CSS混合模式

background-blend-mode属性允许指定一个元素背景层的混合模式。无论是元素的背景颜色background-color、背景图像background-image或者用渐变实现的背景图片，都可以通过background-blend-mode来指定混合模式。

Web设计中的CSS混合模式

不要认为这个属性会得到多大用处？不要让你的页面走得更远。当你为一篇文章从后台上传了一张大图，给背景使用混合模式的Medium值，让你的标题显得更突出。但是，浏览器还不支持CSS混合模式，要让浏览器支持还有很漫长的路要走。上传六张不同颜色的图像适应每个人，后端服务器完成需要一定的过程。这对于读者来说，比直接使用CSS混合模式要慢一些。这个属性也可以运用于其他一些地方：

Web设计中的CSS混合模式

背景混合模式可能会被用来制造这些类似的效果甚至更好。

mix-blend-mode属性

虽然background-blend-mode属性对于背景的混合非常严格，但我们还是非常喜欢在HTML和SVG元素上像PSD中的图层一样混合背景层。这也就是mix-blend-mode属性强大之处。

mix-blend-mode可以将元素和他的背景混合在一起。也许你可以尝试，在背景上使用混合模式中的screen，要强过于使用背景颜色中的rgba()。你也可以在加载动画和混合模式上使用一个无穷数。isolation属性可以隔离元素上使用mix-blend-mode属性，用于隔离元素与背景图像的混合。

使用mix-blend-mode要比background-blend-mode更复杂，所以讨论他也更费时间，但并不会让你失望。因为CSS的混合模式即将就要到来。

我们现在可以使用CSS混合模式吗？

现在还不行，但希望今年可以得到支持。该规范已得到SVG规范小组的支持，现在就等CSS规范小组支持，也成为候选推荐标准。一旦发生这样的情况，步子就很快了，可以期望浏览器支持CSS混合模式。

至于浏览器的支持，这里有一个简短的总结：(结止于2014年1月份)

  • Firefox:在版本29中开始支持background-blend-mode属性，但还有一个Bug（如Demo），他们还在研究当中。而且使用mix-blend-mode属性需要在“about:config”中开启。
  • Safari:在"Webkit Nightly"中可以支持background-blend-mode，但并不支持mix-blend-mode。
  • Chrome和Opera:使用mix-blend-mode和background-blend-mode需要在“chrome://flags”或“opera://flags”中开启“Experimental Web Platform Features”。
  • Internet Explorer:在Canvas中不支持CSS混合模式，并且目前还找不到任何发展信息。

扩展阅读

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

如需转载，烦请注明出处：

英文原文：https://medium.com/p/6b51bf53743a

中文译文：https://www.fedev.cn/css3/css-blend-modes-could-be-the-next-big-thing-in-web-design.html

Dunk Low Pro Sb Loden Dark Black Loden 304292-301