css3毛玻璃效果(背景虚化)

记得替换图片才能看见效果哦
filter:blur(20px);
滤镜:模糊(20px);
css：

        body {
            min-height:100vh;
            box-sizing:border-box;
            margin:0;
            padding-top:calc(50vh - 6em);
            font:150%/1.6 Baskerville,Palatino,serif;
        }
        .bg_img h3 {
            font-size:18px;
            color:#ffffff;
        }
        .bg_img p {
            font-size:14px;
            color:#ffffff;
            font-variant-ligatures:common-ligatures discretionary-ligatures historical-ligatures;
        }

        body,.bg_img::before {
            background:url("images/bg.jpg") 0 / cover fixed;
        }
        .bg_img {
            position:relative;
            margin:0 auto;
            padding:1em;
            max-width:23em;
            background:hsla(0,0%,100%,.25) border-box;
            overflow:hidden;
            border-radius:.3em;
            box-shadow:0 0 0 1px hsla(0,0%,100%,.3) inset,0 .5em 1em rgba(0,0,0,0.6);
            text-shadow:0 1px 1px hsla(0,0%,100%,.3);
        }
        .bg_img::before {
            content:'';
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:-30px;
            z-index:-1;
            -webkit-filter:blur(20px);
            filter:blur(20px);
        }

html：

<div class="bg_img">
    <h3>背景模糊</h3>
    <p>背景模糊背景模糊背景模糊背景模糊背景模糊背景模糊背景模糊背景模糊背景模糊背景模糊背景模糊背景模糊背景模糊背景模糊背景模糊背景模糊背景模糊背景模糊</p>
</div>