boostrap 怎么可以让div背景模糊 字不模糊

Posted 2023-03-24

参考技术A 在父容器中设置背景，并且使用相对定位，方便伪元素重叠。而在:after中只需要继承背景，并且设置模糊，绝对定位覆盖父元素即可！
代码如下：
<div class="content">
<div class="text">hello</div>
</div>

/*背景模糊*/
.content
width:100%;
height:100%;
position: relative;
background: url("../image/banner/banner.jpg") no-repeat fixed;
padding:1px;
box-sizing:border-box;
z-index:1;

.content:after
content: "";
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: inherit;
filter: blur(2px);
z-index: 2;

.text
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
width:200px;
height:200px;
text-align: center;

z-index:11;

CSS 背景图片虚化

参考技术A 背景图片虚化主要依靠的是 filter: blur(15px); 这个css属性
blur值 越大 模糊程度也越大

最终我们希望的效果图是这样的

实现方式：
第一步 一个大的 div 里面包裹两个 小的 div1 和 div2
第二步 div1元素加入背景、宽高、过滤（filter)、浮动
第三步 div2元素 开启定位 absolute（一定要脱离普通文档流）
现在基本的效果就实现了，想让页面更美观 剩下的就要自己动手喽

关键点就是
filter属性 ：让图片模糊
脱离普通文档流 ：内容放到模糊div1 的上面