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后面的旗帜下工作）。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

<强> 2。叠加层不应该是filter元素

的子元素

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

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

模态窗口后面的黑色和白色覆盖

1 个答案: