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

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

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

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

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

一直以来在大家的印象中，处理图像的效果都应该是设计师的工具，甚至这些事情应该都交给PhotoShop之类的设计软件来完成。但是随着CSS的技术发展以及浏览器更新，前端人员通过CSS也可以做一些图像的处理。今天就是想跟大家聊聊如何通过CSS来处理图像效果。

首先要声明的是，我们在这篇文章中要了解的不是CSS混合模式如何使用，而是来一起探索CSS混合模式的一些高级运用以及它能做些什么，又会带来什么样的效果。操作过像Photoshop这样的图像处理软件的同学，对于图层混合模式一定不会感到陌生，但对于CSS中的混合模式，估计还是有不少的同学会感到陌生或者好奇。在这篇文章并不会介绍CSS的混合模式相关的属性怎么使用，而会探讨CSS的混合模式的一些高级运用，以及对应的效果。

在Web技巧的第五期中专门提到一个有关于CSS实现黑暗模式和高亮模式的技术方案。即使用新的媒体查询条件prefers-color-scheme的值dark和light来进行切换，这是从最底层也是最原生的解决方案，除此之外还可以通过CSS的混合模式属性来模拟。当然，除了期刊中提到的技术方案之外，还有其他的一些解决方案。今天我们就来一起学习一下，如何实现黑暗模式和高亮模式之间的切换。

前两天在Codepen看到了@Kyle Wetton写的一个示例，使用CSS混合模式和SVG来改变沙发的颜色。非常有意思的一案例。这让我想起了在实际的一些业务场景中的运用，比如说一些美妆的应用中，就有类似的场景。不知道大家是否想深入的了解如何实现这样的效果？如果是，那么请继续往下阅读。

随着Web技术不断的革新，以往很多依赖于图片展示的布局能较轻易地通过代码来实现，而且现在的布局也不仅仅局限于平面的布局。实际上也有一些伪3D，甚至是3D的布局效果。前两天看到@Preethi分享的一个效果就是我们平时难于用代码实现的一个效果。就这样的效果放到今天来说，我们通过CSS可以实现，而且这样的一个效果是一个典型的效果，所以今天和大家一起来探讨这样的一个布局效果。刚才提到借助于Web的一些特性，我们可以实现伪3D的效果（看上去像上一个3D的布局）。这样的布局主要目的是为了增强一个立体的空间感。