你一定见过我，但是却不知道原来我叫“毛玻璃”

我长这样

• 普通的我

• 拥有了毛玻璃效果的我

可以看到毛玻璃效果其实就是当前元素后面背景内容的模糊，这个效果在操作系统中大家并不陌生吧

如何实现我

两行关键代码即可起飞 🛫

• 需要设置当前元素的背景透明度非 1，这里我们通过使用 background-color: rgba(255, 255, 255, 0.5); 来设置背景颜色，并设置了透明度为 0.5
• 使用 backdrop-filter 属性来设置当前元素后面内容的模糊度

支持 backdrop-filter 属性的浏览器实现毛玻璃效果 demo

我的兼容性问题

目前大部分的主流浏览器例如 Chrome、Edge、Safari 等都支持了这个属性，但是 Firefox 等一些浏览器仍不支持，所以针对这些不支持的浏览器我们可以怎么兼容呢？

针对 Firefox，使用 filter 属性来实现毛玻璃效果

此 demo 演示了静态背景下在不支持 backdrop-filter 属性浏览器中如何实现毛玻璃效果

不支持 backdrop-filter 属性的浏览器实现毛玻璃效果，Firefox 基础篇 demo

其他不兼容浏览器实现毛玻璃效果待补充

参考资料

developer.mozilla.org/zh-CN/docs/…