HTML部分:
<div>要覆盖的页面
<div class="bj-detail-body">
<div class="bj-detail">
</div>
</div>
</div>
第一种:普通遮罩(只是覆盖一层透明颜色)
.bj-detail-body{
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(15px);
}
第二种:使背景页面变模糊
.bj-detail-body{
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
&::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.4);
backdrop-filter: blur(7px);
// filter:blur(5px);
}
}
.bj-detail {
position: absolute;
top: 55px;
right: 152px;
color: #fff;
width: 1454px;
border: 2px solid #fff;
border-radius: 5px;
box-sizing: border-box;
注意:此时用的bj-detail-body的伪元素来写的,因为直接写会使整个(上下都包括)页面都变模糊