覆盖过滤器属性

Question

我有一个正文标签 -webkit-filter: grayscale(100%)

体内我需要div.an-没有灰度的替代方案。我尝试将 -webkit-filter: grayscale(0) 添加到此 div，但没有任何改变。

如果我添加到正文 font-size: 16px，然后添加到 div font-size: 20px，div 中的文本将为 20px。为什么这个原则不适用于过滤器？

我的代码：

html 
<body class="different classes here" style="-webkit-filter: grayscale(100%); background-attachment: scroll;"> ... 
<div class="an-alternative"> ... </div>
</body>

css
body .an-alternative {
margin-left: 240px;
-webkit-filter: none;
filter: none;
background-color: red;

}

这是一个简单的 jsfiddle 示例，它也不起作用 - https://jsfiddle.net/28yovw0k/1/

Answer 1

我最近遇到了类似的问题。在我的回答中有两点需要注意，您要覆盖的元素需要更高的 CSS 特异性以及过滤器属性在这里应用于所有 children div .正如 Paulie_D 所说，您不能覆盖 parent 的过滤器。但此解决方案确实允许您 "remove" 灰色过滤器。

.gray div {
    width: 100px;
    filter: grayscale(0.8);
    height: 100px;
}
.gray .red {
    background: red;
    filter: grayscale(0);
}
.blue {
    background: blue;
}
.green {
    background: green;
}

覆盖过滤器 属性

Override a filter property

css

filter

覆盖过滤器属性