css实现高斯模糊（毛玻璃效果）

场景

昨天设计走查我们做的成果时，有一个弹窗的毛玻璃效果还原度不高，要求有元素拖到毛玻璃后面的时候，这些元素也是模糊的。
我最开始在蓝湖右侧复制的代码，用了background渐变，最重要的是使用了filter: blur(15px);但是发现最终的效果并没有使毛玻璃后面的元素变得也模糊，只是背景变高斯模糊了。
当时我在想，我就是按照设计给的色值做的呀，高斯模糊不就是filter吗，也是15px呀。并没有觉得是自己用的不对的问题。
想要实现的效果如下图

解决

本来这个效果是我暂时代替同事写的，然后同事有时间改设计提的他做的这部分需要修改的地方时，我今天一拉代码，发现我厉害的同事改好了这个效果，于是我就好奇看了下如何做到的。
哇，最终发现他将filter: blur(15px)改为了backdrop-filter: blur(15px)就好了。这么简单，于是就去再仔细了解了下filter和backdrop-filter。

小结

filter

只能让它作用的背景变模糊，当有元素拖动到它下面时，不会模糊下面的元素。仅仅是当前背景变模糊。

backdrop-filer

搜索了之后人家说：这个属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

在这里在说一句，还是我同事厉害呀！我太死板了！要向其他人学习！