如何使用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