打开 Bootstrap 模式时无法获得模糊的背景答案

【问题标题】：Cannot get blurry background when Bootstrap modal is opened打开 Bootstrap 模式时无法获得模糊的背景
【发布时间】：2023-01-16 19:39:19
【问题描述】：

我正在使用Bootstrap 5.1.3，我想模式打开时模糊背景使用 CSS backdrop-filter 属性。

我尝试过的最简单的方法是：

.modal-backdrop {
  backdrop-filter: blur(5px);
}

现场演示：https://codepen.io/kikosoft/pen/YzjxOQm

我使用的是最新的 Firefox 浏览器，但在 Chrome (Windows 11) 中的结果是一样的。

我尝试了很多建议的变体，但没有一个起作用。背景永远不会变得模糊。有人可以用backdrop-filter 模糊背景吗？我在这里错过了什么？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-modal blur

【解决方案1】：

您需要根据以下代码更改 CSS 和 HTML 结构。

.modal-open .main-wrapper {
  filter: blur(5px);
}

<script src="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-wrapper">
<h1>This text should get blurred when the modal is opened.</h1>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

【讨论】：

这确实有效，但我特别想使用backdrop-filter。 modal-open 类的巧妙使用。

【解决方案2】：

我没有足够的代表发表评论，所以我在这里写下我的回答：

你应该把你的风格应用到#exampleModal

#exampleModal {
  backdrop-filter: blur(5px);
}

【讨论】：

你肯定在这里做某事。当我使用 .modal { backdrop-filter: blur(5px); } 时，它适用于我所有的模态。诡异的。当我将过滤器应用于模态的实际背景时，为什么这不起作用？