最近在写活动页面遇到一个效果，在黑色透明蒙层后面的元素要有模糊，毛玻璃的效果，最初想到的就是 filter: blur(2px) ，直接在元素上使用，但是整个子元素都被模糊了，而且蒙层的背景并没有效果，经过百般搜索和尝试，发现还有一个属性可以实现专门针对有透明度的元素做模糊的效果，而且还不会影响到子元素的展示，它就是 backdrop-filter: blur(3px) ，完美的实现了设计稿的要求。
下面就来看看这两个属性的区别，遇到的问题以及解决方案。
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
想要模糊图像或者某个不带透明度的元素，可以直接在元素上加 filter: blur(2px) ，如果这个元素下面有子元素，这样写子元素也会被模糊，解决方法是使用伪元素加定位效果实现：
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
所以给蒙层的后面添加模糊的效果，可以直接在蒙层元素上使用 backdrop-filter: blur(2px)即可。
这两个属性的使用可以详细的参考 mdn上的描述：
backdrop-filter
filter
css中在blur模糊的基础上让边缘变清晰方法：.blur {
-webkit-filter: blur(5px)
-moz-filter: blur(5px)
-o-filter: blur(5px)
-ms-filter: blur(5px)
filter: url(#blur-effect-1)
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5')
zoom: 1
}
要点：给需要磨砂的div(设rgba的那个元素) =>设置伪元素；
给伪元素content: ''、绝对定位，四处为0,left：0....
给伪元素一样的背景图，并给z-index: -1 、给自身z-index:1 ***重要，必须给！
最后给 伪元素 filter: blur(37px) 属性值，效果就出来了。
body{
background: url(./heroheart.jpg)
background-size: cover
}
#app{
margin: 100px auto
width: 600px
height: 370px
background: rgba(0,0,0,.5)
padding: 100px
position: relative
z-index: 1
}
#app::after{
position: absolute
left: 0top: 0
bottom: 0right: 0
content: ''
background: url(./heroheart.jpg)
background-size:cover
z-index: -1
filter: blur(37px)
}
p{
font-size: 28px
color: #FFFFFF
margin-bottom: 30px
}
<div id="app">
<p>时间带走了回不去的青春，</p>
<p>却带不走我一往无前的心！</p>
<p>世间万物，万般困难、</p>
<p>能耐我何？</p>
</div>
