CSS 揭秘(4)--染色效果

Posted by liveipool on February 8, 2017

染色效果

为一副灰度图片(或是被转换为灰度模式的彩色图片)增加染色效果(color tint)是一种流行且优雅的方式,可以给一系列风格迥异的照片带来一些视觉上的一致性。我们通常会在静止状态下应用这个效果,当发生:hover或其他交互时再去除。

CSS3 filter(滤镜) 属性

filter 属性定义了元素(通常是< img >)的可视效果(例如:模糊与饱和度)。
它的取值可见:http://www.runoob.com/cssref/css3-pr-filter.html 浏览器支持情况:
17.1.png

基于滤镜(filter)的方案

  • 由于没有一种滤镜就能够实现要求,我们需要将多个滤镜组合起来:
  • sepia():它会给图片增加一种降饱和度的成黄色染色效果
  • saturate():给每个像素提升饱和度。
  • hue-rotate():把每个像素的色相以指定的度数进行偏移。

原图:
17.5.png

filter: sepia(1);

17.2.png

filter: sepia(1) saturate(4);

17.3.png

filter: sepia(1) saturate(4) hue-rotate(295deg);

17.4.png

接下来可以添加交互和动画:

img {
	transition: .5s filter;
	filter: sepia(1) saturate(4) hue-rotate(295deg);
}

img:hover,
img:focus {
	filter: none;
}

但是,使用滤镜方案会使图片最后出来的效果变得不那么自然。
另外还有一种更好的实现方法–混合模式。
要对一个元素设置混合模式,有两个属性可以派上用场:mix-blend-mode可以为整个元素设置混合模式,background-blend-mode可以为每层背景单独指定混合模式。
注意,滤镜和混合模式至今的浏览器支持并不是太好,要设置好回退方案。