CSS 弹框背景变模糊或者加遮罩

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的伪元素来写的，因为直接写会使整个（上下都包括）页面都变模糊