最近在写活动页面遇到一个效果，在黑色透明蒙层后面的元素要有模糊，毛玻璃的效果，最初想到的就是 filter: blur(2px) ，直接在元素上使用，但是整个子元素都被模糊了，而且蒙层的背景并没有效果，经过百般搜索和尝试，发现还有一个属性可以实现专门针对有透明度的元素做模糊的效果，而且还不会影响到子元素的展示，它就是 backdrop-filter: blur(3px) ，完美的实现了设计稿的要求。
下面就来看看这两个属性的区别，遇到的问题以及解决方案。
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
想要模糊图像或者某个不带透明度的元素，可以直接在元素上加 filter: blur(2px) ，如果这个元素下面有子元素，这样写子元素也会被模糊，解决方法是使用伪元素加定位效果实现：
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
所以给蒙层的后面添加模糊的效果，可以直接在蒙层元素上使用 backdrop-filter: blur(2px)即可。
这两个属性的使用可以详细的参考 mdn上的描述：
backdrop-filter
filter
这个css是无法实现局部模糊的，所以做不到，但是有一点可以做到就透明.xx{background:rgba(255,255,255,0.4)}这样就是一个背景色为白色 透明度为50%的效果了但是IE9一下不支持这种写法，模糊也是:
.blur {
filter: url(blur.svg#blur)/* FireFox, Chrome, Opera */
-webkit-filter: blur(10px)/* Chrome, Opera */
-moz-filter: blur(10px)
-ms-filter: blur(10px)
filter: blur(10px)
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false)/* IE6~IE9 */
}
那个效果一个是窗口区域背景模糊，一个是窗口区域窗口半透明。 背景模糊可以做，但是背景局部模糊办不到
