兼容方案探究聊聊使用CSS怎么实现毛玻璃特效( 二 ) _生活百科

文章插图

3.2 利用 margin 属性的负值扩大容器
模糊度的效果如下图，还是有差异，因为 filter 是从容器外边框向内聚合的一个滤镜，导致滤镜外边框有一个白圈

文章插图

此时只需要扩大 ::before 元素的容器大小，这里直接可使用 margin 属性负值扩大容器
.card-filter::before { ...+ margin: -20px;}此时的效果就有点“那个意思了” ，看来快可以交差了

文章插图

3.3 ::after 填补消失的背景色
原本设置在 .card-filter 类上的 background-color: rgba(255, 255, 255, 0.72); 没起作用！
因为 ::before 伪类作用于 .card-filter 元素内，是其子元素，又因为 ::before 的 background 属性设置了背景图，遮盖了父元素 .card-filter 的背景色。
知道了原因，那么我们就可以在 .card-filter 元素内再添加一个子元素（伪类），用于设置背景色！

文章插图

再偷个懒，直接使用 ::after 伪类，就不用改造 DOM 结构。
.card-filter::after { content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: rgba(255, 255, 255, 0.72);}此时，效果就和 backdrop-filter 的效果相同：

文章插图

放到“自研”的 Webview 内核中也能看到效果了！
四、总结总的来说，如果能说服产品经理和 UI 小姐姐的话，咱就用 backdrop-filter ，说服不了就用 filter 的组合拳模拟吧！
另外 backdrop-filter 属性是有性能问题的，咱就是说，都 2022 年了，求求大家升级一下手上的设备吧！，兼容性真让前端工程师秃头儿！