CSS使用图片背景模糊问题怎么处理呢？

发布时间：2023-09-13 12:32:18 所属栏目：语言来源：

导读：这篇文章主要讲解了“CSS使用图片背景模糊问题如何处理呢？”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS使用图片背景模糊问题如何处理呢？

这篇文章主要讲解了“CSS使用图片背景模糊问题如何处理呢？”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“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;

}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!