javascript - 如何使引导模式背景获得模糊效果

Question

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

我尝试过使用以下 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 框架建立的。

这是模式打开时的实际外观，但是，我希望它具有模糊的背景。

模态：

标签： javascripthtmlcssreactjstwitter-bootstrap

Answer 1

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

例子。

这是本质：

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>