html磨砂效果,使用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;

}

时间带走了回不去的青春，

却带不走我一往无前的心！

世间万物，万般困难、

能耐我何？