javascript - 模态窗口后面的黑白叠加

Question

再次需要帮助。 有一个调用模态弹出窗口的按钮，该按钮又调用 div.overlay。 overlay 类的 css 片段:

.overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 z-index: 100;
 background: rgba(0,0,0,0.7);
}

非常标准的情况。我需要的是，覆盖层充当其后面背景的过滤器，将 body 绘制为黑色和白色。 现在我知道有 css grayscale()，问题是我申请的时候

body {
 filter: grayscale(100%);
}

与.overlay一起 - 我的模式弹出窗口也变成了黑白。 关于如何实现黑白主体的任何想法，都不能与叠加层进行交互(不能点击模态后面的任何内容)，同时不要使模态窗口也变成黑白。

Answer 1

您有两个选择:

<强>1。 backdrop-filter

这将是最简单的方法，但浏览器支持非常差，目前几乎只有 Safari 9+ 可以正确支持它(它可能在 Chrome 中工作)。

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: grayscale(1);
  backdrop-filter: grayscale(1);
}

.inner {
  background-color: #f88;
  padding: 20px;
  font-size: 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Rosa_Red_Chateau01.jpg/360px-Rosa_Red_Chateau01.jpg" width="200">

<div class="overlay">
  <div class="inner">
    Overlay
  </div>
</div>

<强>2。 Overlay 不应是 filter 元素的子元素

filter 将应用于元素本身及其所有子元素，因此如果您不希望它受到影响，覆盖层 div 不应该是过滤元素的子元素。

在以下示例中，当您显示/隐藏叠加层时，您必须切换grayed 类。

.grayed {
  filter: grayscale(1);
}

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
}

.inner {
  background-color: #f88;
  padding: 20px;
  font-size: 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

<div class="app grayed">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Rosa_Red_Chateau01.jpg/360px-Rosa_Red_Chateau01.jpg" width="200">
  <!-- The rest of your app is in here -->
</div>

<div class="overlay">
  <div class="inner">
    Overlay
  </div>
</div>