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

记得替换图片才能看见效果哦
filter:blur(20px);
滤镜:模糊(20px);
css：
body { min-height:100vh; box-sizing:border-box; margin:0; padding-top:calc(50
vh -6em); font:150%/1.6 Baskerville,Palatino,serif; } .bg_img h3 { font-size:18
px; 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>

• « 上一篇：CSS遮罩效果(模糊效果，阴影效果，毛玻璃效果)
• » 下一篇：大龄程序员深谈实录，那些你关心的话题都聊到了