css时光机,如何使用CSS3合成模式（blend-mode）和滤镜（filter）实现彩色蜡笔（时光机）照片特效...

在之前的文章中我们已经详细讲解过CSS3滤镜(filter，也可称之为过滤器)的工作方式，

本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。

我们首先实现一个勾勒轮廓的效果，这可以通过两张相同背景图细微错位然后求差值来获得：.colored-pencil-effect:before {

background-image: url(/uploads/161101/happy.jpg), url(/uploads/161101/happy.jpg);

background-blend-mode: difference;

background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);

}

上面的样式代码将得到如下效果：

由于是difference混合，那么颜色越接近的地方越黑，不存在人物的地方由于几个像素区域之间颜色几乎一样，所以经过这个混合后基本上都是黑色，而有人物的地方重点勾勒出了边界处。

接下来，我们给这个图加上反色滤镜、2倍亮度和灰度滤镜(也就是去掉彩色)效果：.colored-pencil-effect:before {

background-image: url(/uploads/161101/happy.jpg), url(/uploads/161101/happy.jpg);

background-blend-mode: difference;

background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);

-webkit-filter: brightness(2) invert(1) grayscale(1);

filter: brightness(2) invert(1) grayscale(1)

}

现在图片看起来像下面这样：

已经有点接近最终效果了，我们现在只要给这个灰度轮廓图涂上颜色即可，这刚好可以通过color混合模式来达到：.colored-pencil-effect:after {

background: inherit;

mix-blend-mode: color;

background-image: url(/uploads/161101/happy.jpg);

background-size: cover;

background-position: 50%;

}

color混合模式取上层(:after)的颜色和饱和度，取下层(原图img元素和:before的复合结果)的亮度，这样我们就得到了最终的效果图如下：

我们把这个称之为彩色蜡笔或者时光机特效。

我们注意到使用:before,:after伪元素来辅助完成图像混合是非常方便的。

CSS3执行混合计算时，有一个和z-index相关的堆栈上下文(Stacking Context)的概念，可参考阅读：

https://drafts.csswg.org/css21/visuren.html#x43