CSS设置背景图片模糊内容不模糊的解决方法
(编辑:jimmy 日期: 2024/11/25 浏览:3 次 )
需求:一个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设置背景图片模糊内容不模糊的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
下一篇:css3 border-radius属性详解