Question

我有一个弹出显示onload的页面。整个网站是灰度的，但我想弹出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>

灰色的整个网站，除了一些div不工作

1 个答案: