css 设置背景图片模糊,内容不模糊,怎么用css设置背景模糊
2017-07-24 09:05
471 查看
需求:一个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;
}
文章地址:http://blog.yunzhancms.com/index.php?s=/Article/detail/id/293 欢迎转载,转载时请注明出处
相关文章推荐
- css设置背景图片模糊,内容不模糊
- css 设置背景图片模糊,内容不模糊
- css 设置背景图片模糊,内容不模糊
- 怎么用css设置背景图片?
- CSS那个背景图片的坐标怎么设置?怎么计算的?
- css 背景图片模糊 上面内容不模糊
- CSS设置背景图片,背景图片不动内容滚动
- DIV+CSS中让布局居中_背景图片居中_文字内容居中
- css利用border-radius圆角来设置背景图片为圆角的
- css 设置背景图片在ie浏览器下面不显示
- css为图片设置背景图片
- CAD转图片怎么设置输出色彩和背景颜色
- 图片模糊和背景视图设置毛玻璃效果
- DIV+CSS中让布局居中_背景图片居中_文字内容居中
- 背景图片百分之百大小css设置方法
- css background之设置图片为背景技巧
- css背景图片的设置
- css控制背景示例(css设置背景图片、设置背景颜色)
- DIV+CSS中让布局居中_背景图片居中_文字内容居中
- 设置了背景图片的TextView,其尺寸设置为wrap_content时,并不是适应文字内容大小