Page 189 - css揭秘

似，但我们无法在这里直接套用那里的解决方案，因为处在这个对话框下层
的可能是任何元素，而不一定只有一张背景图片。那我们该怎么办？

解决方案

很遗憾，我们还是得动用一个额外的 HTML 元素来实现这个效果：需
要把页面上除了关键元素之外的一切都包裹起来，这样就可以只对这个容器
图 6-15 元素进行模糊处理了。<main> 元素在这里是极为合适的，因为它可以发挥
一个朴素的对话框，没有配备用 一箭双雕的作用：把页面中的主要内容标记出来（对话框通常都不是主要内
于弱化背景的遮罩层 1①
容），同时还给了我们添加样式的钩子。结构代码基本上如下所示 ：

<main>Bacon Ipsum dolor sit amet...</main> HTML
<dialog>
O HAI, I'm a dialog. Click on me to dismiss.
</dialog>
<!-- 其他对话框都写在这里 -->

在图 6-15 中可以看到，它并没有配备遮罩层。接下来，每当弹出一个
对话框，都需要给 <main> 元素增加一个类，以便对它应用模糊滤镜：
图 6-16
main.de-emphasized {
当对话框显示出来时，模糊 <main> filter: blur(5px);
元素 }

在图 6-16 中可以看到，这已经是一个巨大的进步了。不过，现在这个
模糊效果是突然出现的，看起来不是那么自然，反而给人一种突兀的感觉。
由于 CSS 滤镜是可以设置动画的，我们可以让页面背景的模糊过程以过渡
动画的形式来呈现。

main {
transition: .6s filter;
图 6-17 }

同时应用模糊效果和阴影效果， main.de-emphasized {
两者都是由 CSS 滤镜来实现的 filter: blur(5px);
}

如果能把这两种弱化背景的手法（阴影和模糊）结合起来，那就更好
了。有一种实现方法就是使用 brightness() 和 / 或 contrast() 滤镜：

main.de-emphasized {
filter: blur(3px) contrast(.8) brightness(.8);
}

图 6-18 我们可以在图 6-17 中看到效果。通过 CSS 滤镜产生阴影效果，意味
用 CSS 滤镜来实现模糊效果，用 着一旦滤镜不被支持，我们将没有任何回退方案。因此，不妨换用其他方
box-shadow 来实现阴影效果；后
者还可以起到回退的作用
① 我们假设所有 <dialog> 元素在初始状态下都是隐藏的，而且同一时刻最多只会出现一个。

158 第 6 章 用户体验

඀ࠡ JOEC