需求:一个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
;
}
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理