记得替换图片才能看见效果哦
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>
技术
今日推荐