Page 188 - css揭秘
P. 188
33 通过模糊来弱化背景
背景知识
过渡动画，“毛玻璃效果”，“通过阴影来弱化背景”
难题
在“通过阴影来弱化背景”中，我们介绍了一种通过半透明遮罩层调暗
并弱化页面背景的方法。不过，如果背景页面中包含很多内容的话，只有将
其调到很暗的程度，才能为背景之上的文本提供足够的对比度，才能把用户
的注意力引导到弹出层上。还有另外一种更加优雅的方法，就是把关键元素
之外的一切都模糊掉，用来配合（或取代）阴影效果，如图 6-14 所示。这
个效果的真实感更强，因为它营造出了“景深效果”：当我们的视线聚焦在
距离较近的物体上时，远处的背景就是虚化的。
图 6-14
游戏网站 polygon.com 就是一个
生动的案例，它对页面的背景部
分作了模糊处理，从而把用户的
注意力集中到对话框上
不过，这种方法的实现难度也更高。在滤镜效果（http://w3.org/TR/
filter-effects）出现之前，它完全是不可能完成的任务；即使是在 blur() 滤
镜出现之后，这个任务仍然是非常困难的。如果我们想对除了某个特定元素
之外的一切应用模糊效果，那到底应该把滤镜应用到哪个元素上呢？如果把
它应用到 <body> 元素上，页面中的所有元素都会被模糊处理，我们想要凸
显出来的那个关键元素也不例外。这跟“毛玻璃效果”一节中的问题非常类
33 通过模糊来弱化背景 157
$44 JOEE
