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特异性，并且filter属性将应用于所有子div。因此，正如Paulie_D所说，您无法覆盖父级的过滤器。但是此解决方案确实允许您“删除”灰色滤镜。

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

覆盖过滤器属性

1 个答案: