会飞的鱼Blog

记录学习与后端知识并分享学习代码过程（会飞的鱼Blog）

1 fee主题免费版V1.9介绍与更新记录 29W+ 2 emlog程序生成读取缓存方式调用文章列表 26W+ 3 emlog模板：fee主题商业版V2.1 功能介绍 23W+ 4 分享个360水滴偷拍情趣酒店14部全集另带迅雷安卓版下载 17W+ 5 CorePress去除版权教程 11W+

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

会飞的鱼 0 1684 2019年6月15日

需求：一个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;
}

本文由 @会飞的鱼于 2019-6-15 发布在会飞的鱼Blog，如无特别说明，本博文章均为原创，转载请保留出处。

网友评论

暂无评论

会飞的鱼 V

一条会飞的鱼！

748 文章

7284 评论

1105 万阅读

9年博龄

最新文章

最新评论: 桃桃
6个月前 (2025-01-25)

大佬拿个新春版注册就提示404怎么办

CF1.0服务端后台管理系统CFer V1.8

1
6个月前 (2025-01-21)

6666

CFAM后台系统支持所有CF2.0服务端 V2.0

小妖精博客
8个月前 (2024-11-24)

还有最新下载地址吗

Emlog主题Media - V1.0.2 全新自媒体风格主题

鸿鹄小猿
9个月前 (2024-10-27)

感谢分享

FLY 1.4 开源美化V2极致版EMLOG主题

apqberb
12个月前 (2024-08-15)

1.8的授权怎么获得啊

CFAM后台系统支持所有CF2.0服务端 V2.0

标签

会飞的鱼在线咨询

在线时间：9：00-22：00
周六、周日：14：00-22：00