如何使引导模式背景获得模糊效果[重复]答案

【问题标题】：How can I make bootstrap modal background get a blur effect [duplicate]如何使引导模式背景获得模糊效果[重复]
【发布时间】：2019-06-27 15:27:21
【问题描述】：

我想弄清楚使打开的模态表单的背景具有模糊效果的最佳方法是什么。

我已尝试使用以下 CSS 代码：

`body.modal-open >:not(.modal) {
    -webkit-filter: blur(5px) grayscale(90%);
    filter: blur(5px) grayscale(90%);
}`

但它最终将其应用于包括内容在内的整个模式，我对如何实现这种效果没有任何想法。

这是触发模式的代码，我一直在尝试应用 CSS 样式。

<button
    type="button"
    id="modal"
    className="btn btn-primary"
    data-toggle="modal"
    data-target="#exampleModalCenter">
      Agendar una Cita
  </button>
  <div
      className="modal fade"
      id="exampleModalCenter"
      tabIndex="-1"
      role="dialog"
      aria-labelledby="exampleModalCenterTitle"
      aria-hidden="true">
`

该项目最初是使用 create-react-app 和 Bootstrap 框架设置的。

这是模态框打开时的实际外观，但是，我希望它有一个模糊的背景。

模态：

【问题讨论】：

重复问题：stackoverflow.com/questions/20039765/… 多个答案可供选择，如果您可以放弃对 Firefox 的支持，我的首选方法是使用backdrop-filter 代替filter。

标签： javascript html css reactjs twitter-bootstrap

【解决方案1】：

请记住，如果你模糊一个元素，那么它会模糊该元素以及所有子元素。所以你需要做的就是将两个元素放在彼此的顶部，然后模糊后面的那个。

Example.

这里是精华：

CSS

.BLURRED-BOX {
  background: blue;
  color: white;
  -webkit-filter: blur(5px) grayscale(90%);
  filter: blur(5px) grayscale(90%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 90;
}


.NOT-BLURRED-BOX {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  width: 300px;
  height: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
}

.NOT-BLURRED-BOX img {
  max-width: 100%;
  height: auto;
}

（重要的）HTML

这就是模态框内的内容。

<div class="modal-body">
  <div class="BLURRED-BOX">
    <p>I am a blurred box</p>
    <img src="https://via.placeholder.com/500" />
  </div>
  <div class="NOT-BLURRED-BOX">
    <p>I am a not blurred box</p>
    <img src="https://media0.giphy.com/media/1lI97corSEnZu/giphy.gif?cid=3640f6095c5748f668686b6a497d5f5d" />
  </div>
</div>

【讨论】：