css设置背景图片模糊,内容不模糊

发布时间:2020-12-04 20:42:33 作者:呵呵后 来源:CSDN 浏览量(438) 点赞(84)
摘要:需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示。原始代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><styletype="text/css"

需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示。

原始代码:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {
                  color: #ffffff;
                  font-size: 40px;
                  }
        .bg {
                  background: url('1.jpg');
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: cover;
                  height:600px;
                  text-align: center;
                  line-height: 600px;
                  }
    </style>
    </head>
    <body>
      <div class="bg">
        <div class="content">我是内容</div>
      </div>
    </body>
    </html>

原始效果:

20160721003209439.png

解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置。

html代码:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content { 
                   color: #ffffff;
                   font-size: 40px;
                  }
        .bg {
                  background: url('1.jpg');
                  height:600px;
                  text-align: center;
                  line-height: 600px;
                  }
        .bg-blur {
                  float: left;
                  width: 100%;
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: cover;
                  -webkit-filter: blur(15px);
                  -moz-filter: blur(15px);
                  -o-filter: blur(15px);
                  -ms-filter: blur(15px);
                  filter: blur(15px);
                  }
        .content-front {
                  position:absolute;
                  left: 10px;
                  height:600px;
                  line-height: 600px;
                  text-align: center;
                  }
    </style>
   </head>
   <body>
    <div>
        <div class="bg bg-blur"></div>
        <div class="content content-front">我是内容</div>
    </div>
    </body>
   </html>

效果:

20160721002755440.png

二维码

扫一扫,关注我们

声明:本文由【达扬网络】编辑上传发布,转载此文章须经作者同意,并请附上出处【达扬网络】及本页链接。如内容、图片有任何版权问题,请联系我们进行处理。

现在,非常期待与您的一次邂逅

青海达扬网络传媒有限责任公司努力让每一次邂逅总能超越期待!

您身边的【互联网信息化建设专家】

搜索千万次不如咨询1次

主营项目:网站建设,手机网站,软件开发,政府网站建设,信息系统开发,网络安全维护,app开发等

立即咨询 0971-6275815
在线客服
嘿,我来帮您!