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

【问题标题】：Adding background blur via CSS behind pop-up modal在弹出模式后面通过 CSS 添加背景模糊
【发布时间】：2020-04-21 21:10:38
【问题描述】：

我希望在单击按钮时弹出的固定模式后面模糊整体 100% 背景。

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

要清楚 - 我希望模态后面的背景元素模糊，所以它后面的部分是模态的焦点。

这是 HTML（不太清楚，但还是发布了）：

<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>

以及当前的 CSS：

.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;
}

到目前为止，这就是我编写的所有代码 - 想要在添加其余代码之前先完成此操作。任何提示都会很棒。干杯！

【问题讨论】：

但是你的模态在哪里？你的问题不清楚。
模态框位于屏幕中间。这就是模式的重点 - 以及显示 flex，其中 align-items 和 justify-content 设置为中心。模态部分覆盖整个视口，模态容器包含模态的实际内容。我希望模态部分模糊背景，但不透明度为 0。我无法设置。
抱歉，我认为我解释错了——想象模态部分覆盖了整个视口。它后面的内容（即网页的其余部分）在它后面是可见的，就像它是透明的，但它是模糊的。模态容器在模态部分的中间居中。这是完全可见的，而不是模糊的。

标签： html css

【解决方案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);
}

【讨论】：