最近在写活动页面遇到一个效果，在黑色透明蒙层后面的元素要有模糊，毛玻璃的效果，最初想到的就是filter: blur(2px)，直接在元素上使用，但是整个子元素都被模糊了，而且蒙层的背景并没有效果，经过百般搜索和尝试，发现还有一个属性可以实现专门针对有透明度的元素做模糊的效果，而且还不会影响到子元素的展示，它就是backdrop-filter: blur(3px)，完美的实现了设计稿的要求。

下面就来看看这两个属性的区别，遇到的问题以及解决方案。

filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
想要模糊图像或者某个不带透明度的元素，可以直接在元素上加filter: blur(2px)，如果这个元素下面有子元素，这样写子元素也会被模糊，解决方法是使用伪元素加定位效果实现：

// html
<section class="wrap">
    我是子元素。不想被模糊    
</section>

// style
.wrap {
    width: 200px;
    height: 200px;
    background: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg') no-repeat;
    color: blue;
    font-size: 18px;
    z-index: 999;
    position: relative;
}
.wrap::before {
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

backdrop-filter

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
所以给蒙层的后面添加模糊的效果，可以直接在蒙层元素上使用backdrop-filter: blur(2px);即可。

.modal {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(2.5px);
}

这两个属性的使用可以详细的参考 mdn上的描述：
backdrop-filter
filter