场景
昨天设计走查我们做的成果时，有一个弹窗的毛玻璃效果还原度不高，要求有元素拖到毛玻璃后面的时候，这些元素也是模糊的。
我最开始在蓝湖右侧复制的代码，用了background渐变，最重要的是使用了filter: blur(15px);但是发现最终的效果并没有使毛玻璃后面的元素变得也模糊，只是背景变高斯模糊了。
当时我在想，我就是按照设计给的色值做的呀，高斯模糊不就是filter吗，也是15px呀。并没有觉得是自己用的不对的问题。
想要实现的效果如下图
解决
本来这个效果是我暂时代替同事写的，然后同事有时间改设计提的他做的这部分需要修改的地方时，我今天一拉代码，发现我厉害的同事改好了这个效果，于是我就好奇看了下如何做到的。
哇，最终发现他将filter: blur(15px)改为了backdrop-filter: blur(15px)就好了。这么简单，于是就去再仔细了解了下filter和backdrop-filter。
小结
filter
只能让它作用的背景变模糊，当有元素拖动到它下面时，不会模糊下面的元素。仅仅是当前背景变模糊。
backdrop-filer
搜索了之后人家说：这个属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
