我长这样
- 普通的我
- 拥有了毛玻璃效果的我
可以看到毛玻璃效果其实就是当前元素后面背景内容的模糊，这个效果在操作系统中大家并不陌生吧
如何实现我
两行关键代码即可起飞 🛫
- 需要设置当前元素的背景透明度非 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
