心得笔记

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

作者：何兴林 发布时间: 2017-07-13 阅读：

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

解决方法：内容和图片分别置于一个div，通过css设置背景div模糊度，设置内容div绝对位置，实质上是在底层加了一个div,给这个div设置模糊了。

<div class="banner_box">
    <div class="banner_bg" style="background: url(img/shouye2_06.png);"></div>
    <div class="banner swiper-container">
       这里面是清晰的内容
    </div>
</div>

.banner_bg{

width:100%;

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;

}

文章地址：http://blog.yunzhancms.com/index.php?s=/Article/detail/id/293 欢迎转载，转载时请注明出处