Page 125 - css揭秘

另外一种方法是：在图片的上层覆盖一层半透明的纯色；或者把图片设
置为半透明并覆盖在一层实色背景之上。但这其实并不是真正的染色效果：
不仅没有把图片中的各种颜色转换为目标色调，同时也极大地削弱了图片的
对比度。

此外还有基于 JavaScript 的方案，把图片置入 <canvas> 元素中，并利
用脚本对其进行染色处理。这确实可以得到真实的染色效果，但性能不佳，
而且限制很多。
难道就没有一种更简单的、纯 CSS 的方法能实现图片染色效果吗？

基于滤镜的方案

由于没有一种现成的滤镜是专门为这个效果而设计的，我们需要花一些
心思，把多个滤镜组合起来。

我们要使用的第一个滤镜是 sepia()，它会给图片增加一种降饱和度的
橙黄色染色效果，几乎所有像素的色相值会被收敛到 35~40（参见图 4-10）。
不完全支持
如果这种色调正是我们想要的，那就可以收工了。不过我们的需求通常并
非如此。如果我们想要的主色调的饱和度比这更高，可以用 saturate() 滤
镜来给每个像素提升饱和度。假设我们想要的主色调是 hsl(335, 100%,
50%)，那就需要把饱和度提升一些，于是我们将饱和度参数设置为 4。具体
取值取决于实际情况，我们通常需要用肉眼来观察和判断。如图 4-11 所示，
这两个滤镜的组合会让我们的图片具有一种暖金色的染色效果。

图片现在看起来很不错，但我们并不希望把图片调为这种橙黄色调，而
是稍深的亮粉色。因此，我们还需要再添加一个 hue-rotate() 滤镜，把每
个像素的色相以指定的度数进行偏移。为了把原有的色相值 40 改变为 335，
我们需要增加大约 295 度（335 – 40）：

filter: sepia(1) saturate(4) hue-rotate(295deg);
图 4-10
原始图片（上图）和添加了 此时，我们就把这张图片的色调改变了，效果如图 4-12 所示。如果这
sepia() 滤镜之后的图片（下图）
个效果需要由 :hover 或其他状态来触发切换，我们甚至还可以为这个变化
增加过渡动画：

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

img:hover,
图 4-11 img:focus {
filter: none;
图片又添加了 saturate() 滤镜 }

94 第 4 章 视觉效果

඀ࠡ JOEC