要点：给需要磨砂的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: 0;top: 0;
bottom: 0;right: 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>
