Page 126 - css揭秘

试一试 play.csssecrets.io/color-tint-filter

基于混合模式的方案

滤镜方案是行之有效的，但你可能会注意到它产生的结果与我们在图
像处理软件中得到的效果不完全一致。即使我们想把图像调为一种很亮的颜 图 4-12
图片又添加了 hue-rotate() 滤镜
色，结果仍然会显得像褪了色一般。如果尝试在 saturate() 滤镜中增加饱
和度，又会得到一种不自然的、过度风格化的效果。不过，幸好我们还有另
一种更好的实现方法——混合模式！

如果用过 Adobe Photoshop 这样的图像处理软件，那你可能已经对混合
模式相当熟悉了。当两个元素叠加时，“混合模式”控制了上层元素的颜色
与下层颜色进行混合的方式。用它来实现染色效果时，需要用到的混合模式 不完全支持
是 luminosity。这种 luminosity 混合模式会保留上层元素的 HSL 亮度信
息，并从它的下层吸取色相和饱和度信息。如果在下层准备好我们想要的主
色调，并把待处理的图片放在上层并设置为这种混合模式，那本质上不就是
在做染色处理吗？
要对一个元素设置混合模式，有两个属性可以派上用场：mix-blend-
mode 可以为整个元素设置混合模式，background-blend-mode 可以为每层
背景单独指定混合模式。这意味着，如果用这个方案来处理图片，我们实际
上有两种选择。不过这两者各有所短。

„ 第一种选择：需要把图片包裹在一个容器中，并把容器的背景色设
置为我们想要的主色调。

„ 第二种选择：不用图片元素，而是用 <div> 元素——把这个元素的
第一层背景设置为要染色的图片，并把第二层的背景设置为我们想
要的主色调。

针对不同的场景，可以选择这两者的其中之一。举个例子，如果我们希 图 4-13
望对一个 <img> 元素应用这个效果，就需要把它包含在另一个元素内部。不 比较一下滤镜产生的效果（上图）
过如果我们已经有了这一层容器，比如 <a>，那就水到渠成了： 和混合模式产生的效果（下图）
HTML
<a href="#something">
<img src="tiger.jpg" alt="Rawrrr!" />
</a>

然后，只需要两行声明就可以实现这个效果：

a {
background: hsl(335, 100%, 50%);
}

img {
mix-blend-mode: luminosity;
}

17 染色效果 95

඀ࠡ JOEC