css设置背景图片模糊，内容不模糊_技术知识_新闻中心

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

发布时间：2020-12-04 作者：呵呵后来源：CSDN 浏览量（2）点赞（0）点踩（0）评论（0）收藏（0）

摘要：需求：一个div设置了background: url，现在需要使图片背景模糊，div内的文字清晰显示。原始代码：<!DOCTYPE html> .content { color: #ffffff; font-size: 40px; ...

需求：一个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>

原始效果：

解决方法：内容和图片分别置于一个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>

效果：