Page 127 - css揭秘

和 CSS 滤镜类似，混合模式可以平稳退化：如果不被支持，效果只是
不出现而已，图片本身还是完好可见的。
有一件事情需要注意，滤镜是可动画的，而混合模式则不是。我们在上
面已经见识过了，一张图片只需要在 filter 属性上设置好 CSS 过渡之后就
可以从全彩样式慢慢淡化为单色样式，但你无法对混合模式做同样的事情。
不过也别着急，这并不表示过渡动画是完全不可能的，只是意味着我们需要
跳出框框来重新思考。
如上面所解释的那样，mix-blend-mode 是把整个元素向下进行混合，
而不管它的下层是什么。因此，如果我们把这个属性设置为 luminosity 混
合模式，那图片就总是会跟某些东西进行混合。此外，使用 background-
blend-mode 属性则可以让每层背景跟它的下层背景进行混合，但并不关心
元素之外是什么情况。另外，当我们只有一个背景图像以及一个透明背景色
时，会发生什么？你猜对了：不会出现任何混合效果！
好的，接下来我们将利用上述分析结果，采用 background-blend-
mode 属性来达成我们想要的效果。在此之前，HTML 代码需要稍作调整：

<div class="tinted-image" HTML
style="background-image:url(tiger.jpg)">
</div>

这样一来，我们就只需要对一个 <div> 元素设置 CSS 了，因为这个技
巧并不需要其他额外的元素：

.tinted-image {
width: 640px; height: 440px;
background-size: cover;
background-color: hsl(335, 100%, 50%);
background-blend-mode: luminosity;
transition: .5s background-color;
}

.tinted-image:hover {
background-color: transparent;
}

不过，就像前面提到的那样，这两种方法都不够理想。它们的主要问题
在于：
„ 图片的尺寸需要在 CSS 代码中写死；
„ 在语义上，这个元素并不是一张图片，因此并不会被读屏器之类的
设备读出来。

生活就是这样，没有十全十美。在这一节中，我们收获了三种实现染色
效果的方法，每种方法都各有优缺点。到底选择哪种方法，还是要看项目的
具体需求。

96 第 4 章 视觉效果

඀ࠡ JOEC