Page 131 - css揭秘
P. 131
图 4-17
对这个元素应用 blur() 滤镜反
而会把事情搞砸
解决方案
假设大背景的 background-attachment 值是 fixed，这种情况是有可
1①
能的 ，只不过不太常见。由于我们不能直接对元素本身进行模糊处理，就
对一个伪元素进行处理，然后将其定位到元素的下层，它的背景将会无缝匹
配 <body> 的背景。
首先，我们添加一个伪元素，将其绝对定位，并把所有偏移量置为 0，
这样就可以将它完整地覆盖到 <main> 元素之上：
main {
position: relative;
/* [其余样式] */
}
main::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(255,0,0,.5); /* 仅用于调试 */
}
我们还给它设置了一层半透明的 red 背景，这样就可以看清楚我们
做了什么，不然很难调试透明的（即不可见的）元素。在图 4-18 中可以看
到，我们的伪元素现在就覆盖在内容元素之上。可以用 z-index: -1; 来修
正这个问题（参见图 4-19）。
!
在使用负的 z-index 来把一
个子元素移动到它的父元素下层
时，请务必小心：如果父元素的
上级元素有背景，则该子元素将
出现在它们之后。 ① 对非固定的背景来说也是有办法实现的，只不过更加麻烦。
100 第 4 章 视觉效果
ࠡ JOEC
