这是使用CSS的filters和混合模式处理图片效果系列文章的第二篇。上一篇介绍了如何使用CSS混合模式中的lighten模式制作一张仿古图片效果，并学习如何做一张漂亮的褪色照片效果。在这篇文章中，我们将看看如何创建3D照片效果。

上周，我在CSS Conf EU上分享了一个主题：PS已死，CSS中处理图像。我最初的想法是10件你常使用Photoshop处理在浏览器显示的效果，但当我开始考虑过滤效果和混合模式时，这一切都处在探索中。我决定要写一系列的文章分享这方面的知识，帮助大家更好的消化。让我们先从一些简单而有效的效果开始！

在现代浏览器中可以使用mix-blend-mode和background-blend-mode属性实现Photoshop中的图层的混合模式。属性值有lighten、multiply和hard-light等，这些属性在CSS中运用效果和Adobe Photoshop效果完全一样。即使每天都在Photoshop中使用它们，但了解混合模式的人相对较少。在这篇文章中，我将介绍基本的混合模式是什么，它们是如何工作的？

CSS Blend Modes是CSS的一个新功能，可以将一个层和元素的背景层混合在一些。常见的是将背景图像和背景颜色混合在一起。在这篇文章中，我们将来体验一上在几个项目中使用Sass编写的一个简单的混合模式的mixin。从而学习如何使用Sass创建混合模式的mixin，并且怎么使用。

如果你是一个设计师，你很可能已经遇到或者总有一天会遇到混合效果。混合在图形和印刷设计方面是使用最频繁的效果之一。你可以通过混合文字和纹理背景来给文字添加纹理，通过把图片混合营造出图片融合的错觉，并创造出广泛而丰富多彩的效果，如果对混合控制没有达到如此精细的程度是不可能创造出这些效果的。

去年年底看到Dudley Storey在他的一篇文章《2014年前端将会发生什么》一文中提到，如何在Web页面中实现类似于Photoshop制图软件中图层混合模式的效果，特别的激动。从而也知道CSS混合模式这样的一个概念，觉得特别有意思，加上这段时间看到相关的讨论，我也有点手痒痒，今天也将试试这一神技，给我们Web的效果带来什么样的变化。

如果你曾经广泛地使用过图片编辑应用软件（例如，Adobe Photoshop，Pixelmator，GIMP等），那么你可能对混合模式比较熟悉。如同名称中所暗示的，混合模式是指将上层的图像融入下层图像时采用的各种模式。根据您所选择的模式，你会看到不同的融合后的效果。这些混合模式，现已 Compositing and Blending Level 1说明文档被添加在CSS中。混合模式被用来指定一个特定的颜色将如何融合到背景层的颜色中。其结果可能十分有趣。

Bennett Feely一直在向人们展示CSS混合模式的特性方面做了很好的工作。过去，在Photoshop的帮助下，静态页面可以比使用动态内容的页面显示出更丰富的设计效果，不过，在CSS混合模式获得了更好的支持以后，这种状况将会得到改善。因为这并不是一件多么枯燥的事情，我很想看到不同的实现方式。

作为一名前端人员，对一些制作软件并不陌生，而里面的图层混合模式都略有所知。而这些混合模式要是直接应用到Web页面中，将会带来网页制作的一个变革。在2014年开始，在互联网上已经开始在讨论这个东东，并且有一个专业的名词“CSS混合模式”。而这个模式在SVG规范中得到支持，并且在CSS规范中也开始提上议程。在不久的将来，这个新特性就能在各大主流浏览器上得到应用。在文中主要介绍了CSS混合模式将是Web设计中一个重大的变化。并且我们也将陆续向大家推出CSS混合模式相关教程，希望对大家有所帮助。