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设置背景图片模糊内容不模糊的解决方法》 发布于2019-6-15

评论

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

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

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏