Page 124 - css揭秘

17 染色效果

背景知识

HSL 色彩模型，background-size

难题

为一幅灰度图片（或是被转换为灰度模式的彩色图片）增加染色效果
（color tint），是一种流行且优雅的方式，可以给一系列风格迥异的照片带来
视觉上的一致性。我们通常会在静止状态下应用这个效果，当发生 :hover
或其他交互时再去除。
一直以来，我们需要使用图像处理软件来生成图片的两个版本，然后
再写一些简单的 CSS 代码来处理这两个版本的交替显现。这个方法行得通，
但它会导致更大的文件体积和额外的 HTTP 请求，而且在可维护性方面也是
一场噩梦。想像一下，一旦我们决定改变这个效果的主色调，就不得不处理
所有的图片，为它们重新制作全套的单色版本！

图 4-9
CSSConf 2014 官网为讲师照片
使用了这个效果，当鼠标悬停或
获得焦点时，照片将显示为全彩
的样式

17 染色效果 93

඀ࠡ JOEC