Page 130 - css揭秘
P. 130
图 4-15
增加背景色的 alpha 值（不透明
度）可以改善文本可读性的问题，
但同时也让整个设计变得无趣了
在传统的平面设计中，这个问题的解决方案通常是把文本层所覆盖的那
部分图片区域作模糊处理。模糊的背景看起来不那么花哨，因此在它之上的
文本就相对比较易读了。过去，由于模糊运算的性能消耗极其巨大，以致于
这个技巧在网页设计和 UI 设计中鲜有用武之地。不过，随着 GPU 的不断进
化以及硬件加速的不断普及，眼下这个技巧已经逐渐流行起来。在过去这几
年里，我们已经可以在较新的 Microsoft Windows 系统中看到这个技巧的身
影，而苹果的 iOS 和 Mac OS X 操作系统也不例外（参见图 4-16）。
图 4-16
过去几年间，由于模糊处理的资
源消耗已经不再像以前那么高不
可攀，由模糊背层所构成的半
透明 UI 已经变得越来越常见了
（左图是 Apple iOS 8.1，右图是
Apple OS X Yosemite）
借助 blur() 滤镜，我们在 CSS 中获得了对元素进行模糊处理的能力。
我们在 SVG 中很早就可以使用模糊滤镜了，而这个 CSS 滤镜本质上就是它
的硬件加速对应版本。不过，如果我们直接在这个例子中使用 blur() 滤镜，
整个元素都会被模糊，文本反而变得更加无法阅读了（参见图 4-17）。有没
有某种方法可以只对元素的背层（即被该元素遮住的那部分背景）应用这个
滤镜呢？
18 毛玻璃效果 99
ࠡ JOEC
