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

iefreer 发表于 2016-11-29 00:18:02

标签: css3, 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);
}

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

blob.png

由于是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)
}

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

blob.png

已经有点接近最终效果了,我们现在只要给这个灰度轮廓图涂上颜色即可,这刚好可以通过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的复合结果)的亮度,这样我们就得到了最终的效果图如下:

blob.png

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

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

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

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

possitive(1) negative(0) views299 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章