应用场景
作为前端，我们经常会遇到UI在设计的时候，使用毛玻璃的效果。如果UI将设计图上传到摹客，前端还可以在开发栏查看到对应的css样式，如下图所示：
图中底部就是UI想要的毛玻璃效果。
回到我们讨论的毛玻璃的话题上，如图所示，鼠标指向拥有毛玻璃效果的区域时，右侧生成了css样式。
filter: blur(10px);就是实现毛玻璃的css滤镜。
可如果我们直接拷贝到项目中，发现根本就达不到UI设计的毛玻璃效果
根据你将filter: blur(10px);作用的元素不同，你可能得到不同的样子，但就是无法跟Ui相同，如下面的图：
1、filter作用于和文字区域相同的兄弟节点
尝试调整了好几个大小的值，始终达不到UI的效果（甚至可以说完全达不到）。
2、filter作用于文字区域的父节点
好家伙，文字都被模糊没了（模糊值设小一点还能看到文字，目前设置的10px直接被干没了）。
那问题出在哪里呢？
我也不再卖关子了啰嗦了，先把实际解决方案拿出来。
其实css还有个css滤镜属性：backdrop-filter，我们将 filter 改为 backdrop-filter即可。
backdrop-filter: blur(10px);
backdrop-filter出现得要比filter晚，应该是为了解决filter使用上的一些不足应运而生的【Filter Effects Module Level 2、backdrop-filter】。
filter 和 backdrop-filter 的区别
通过查找资料，我们发现两者语法和功能极其相似，都包含blur、opacity、grayscale、invert、drop-shadow等滤镜效果。但在具体应用的时候，又有差别，就拿模糊滤镜（毛玻璃）效果来讲：
filter作用于当前元素（后代元素也会继承这个属性）；
backdrop-filter作用于元素背后的所有元素，它可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移等），为了看到效果，必须使元素或其背景至少部分透明。
有大神在codepen上做了个例子做对比，点击这里 查看。
用法总结
- 如果只是模糊整张图片或者整个区域，直接用 filter 就可以实现。
- 如果想要一个模糊蒙层盖住html界面或者图片的某一部分，那么使用 backdrop-filter。
使用注意
css滤镜是一个很耗性能的属性，特别是开发小程序的时候。如果一个小程序页面同时出现了多个毛玻璃的情况下，比如在一个swiper的列表项中，UI设计了毛玻璃的情形，多了可能会让页面卡顿。真遇到这种情形，果断的让UI修改设计，去掉毛玻璃效果吧！
