CSS实现页面背景图片模糊方法

<!DOCTYPE html>  <html>  <head>  <meta charset="UTF-8">  <title>Document</title>  </head>    <style type="text/css">  .banner_bg{  background:url(http://aihaoz.com/zb_users/upload/2021/04/202104171618589518314071.jpg);  width:1000px;  background-repeat:no-repeat;  background-size:cover;  -webkit-filter:blur(15px);  -moz-filter:blur(15px);  -o-filter:blur(15px);  -ms-filter:blur(15px);  filter:blur(15px);  position:absolute;  left:0;  top:0;  height: 500px;  }      .swiper-container{  position: relative;  top:200px;  left: 300px;  color: white;  font-size: 36px;  font-weight: 700;    text-shadow: 0 2px 20px rgba(0, 0, 0, .1);  }  </style>  <body>    <div>  <div></div>  <div class="banner swiper-container">  这里面是清晰的内容  </div>  </div>    </body>  </html>

效果对比

原图:

CSS实现页面背景图片模糊方法,986e44f7d3e40e01.jpg,css,css教程,分享,建站,教程,百度,经验,图文,实现,方法,第1张


效果图:

CSS实现页面背景图片模糊方法,e9b1a2b7deb04386.jpg,css,css教程,分享,建站,教程,百度,经验,图文,实现,方法,第2张


相关文章

您需要 登录账户 后才能发表评论

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注