html - 整个网站呈灰度，除了一些 div 不工作

Question

我有一个带有加载时显示弹出窗口的页面。整个网站都是灰度的，但我想弹出 div 是非灰度的。我尝试过使用 filter: none 或 -webkit-filter: grayscale(0); 但是整个页面都处于灰度状态是行不通的。有人对此有任何想法吗？谢谢!

-webkit-filter: grayscale(0) !important;
filter: grayscale(0) !important;

我的代码:Jsfiddle

Answer 1

-webkit-filter 不是向下层叠且可以覆盖的属性，它应用于整个元素及其子元素之上。如果您将过滤器放在子过滤器上，它会堆叠在父过滤器的顶部。

相反，您需要将过滤器放在一个元素上，该元素是所有您想要变灰的元素的父元素。

div {
  height: 20px;
  position: relative;
}

<div>
  <div style="-webkit-filter: grayscale(1)">
    <div style="background: red">Sample</div>
    <div style="background: blue">Sample</div>
  </div>
  <div style="background: green; position: absolute; top: 10px;">Sample</div>
</div>