css磨砂效果，模糊效果

要点：给需要磨砂的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>