CSS设置背景图片模糊内容不模糊的解决方法

  发布时间:2017-07-24 16:24:53   作者:佚名   我要评论
最近做项目遇到这样的需求一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示。具体解决方法大家参考下本文

需求:一个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;
}

总结

以上所述是小编给大家介绍的CSS设置背景图片模糊内容不模糊的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • CSS设置背景模糊的实现方法

    这篇文章主要介绍了CSS设置背景模糊的实现方法,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-22
  • css3实现背景模糊的三种方式(小结)

    这篇文章主要介绍了css3实现背景模糊的三种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
    2020-05-15

最新评论