如何使自举模态背景模糊

Question

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

我尝试使用以下CSS代码：

<Route path="/:id" component={Child} />


function Child({ match }) {
  return (
    <div>
      <h2>ID:{match.params.id}</h2>
    </div>
  );
}

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

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

`

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

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

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

模式：

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