CSS设置背景图片模糊内容不模糊的解决方法
网页制作 发布日期：2024/12/24 浏览次数：1
正在浏览：CSS设置背景图片模糊内容不模糊的解决方法
需求：一个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设置背景图片模糊内容不模糊的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！