首页 > 技术教程 > 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;
}

 

本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除
Shenle Copyright © 2017-2018 侵权投诉邮箱:706663717@qq.com

广告位 投稿 评论 顶部