通过CSS在弹出模式后面添加背景模糊

Question

我想模糊点击按钮弹出的固定模式后面的100%背景。

我本以为它只是一个模糊滤镜，但它似乎只覆盖了屏幕的一小部分。我尝试添加100vh的高度+宽度，并将位置设置为固定的顶部：0，左侧：0，但元素没有居中。

为了清楚起见，我希望模态后面的背景元素是模糊的，所以它后面的部分，但模态是焦点。

这是HTML(不确定有多重要，但无论如何都要发布(：

到目前为止，这就是我所编码的全部内容——在添加其他内容之前，我想先做这件事。任何提示都很棒。干杯

.blog-modal-section {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
filter: blur(8px);
-webkit-filter: blur(8px);
position: fixed;
top: 0;
left: 0;
z-index: 0;
}
.blog-modal-container {
height: 40%;
width: 40%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}

<section class="blog-modal-section">
<div class="blog-modal-container">
<div class="blog-modal-content">
<h2>My blogs</h2>
<ul>
<li>
<a href="#">Blog 1 - Coming Soon</a>
</li>
</ul>
</div>
</div>
</section>

Answer 1

下面将制作一个屏幕填充元素，该元素也会添加模糊。

.bg{
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);
}