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

来源：爱站网时间：2022-02-16编辑：网友分享

在编写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>

.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背景不模糊”的内容后，希望大家遇到这个问题了，可以想到小编整理的这篇文章。如果有疑问大家可以留言交流，谢谢大家对爱站技术频道的支持!