Page 134 - css揭秘

退的问题，但现在的情况是有一圈模糊效果超出了容器，这让它看起来不像
毛玻璃，而更像是玻璃脏了。

图 4-22
我们修正了边缘处的模糊消退情
况，但现在又出现了模糊效果超
出元素范围的情况

不 过 幸 运 的 是， 这 个 问 题 也 很 容 易 修 复： 只 要 对 main 元 素 应 用
overflow: hidden;，就可以把多余的模糊区域裁切掉了。最终代码如下所
示（最终效果可以在图 4-23 中看到）：

body, main::before {
background: url("tiger.jpg") 0 / cover fixed;
}

main {
position: relative;
background: hsla(0,0%,100%,.3);
overflow: hidden;
}

main::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
filter: blur(20px);
margin: -30px;
}

18 毛玻璃效果 103

඀ࠡ JOEC