fea*_*yan 5 html css google-chrome css-filters
CSS 过滤器似乎不遵循与其他 CSS 属性相同的规则，包括覆盖和应用顺序。
首先，它们只能被后代元素中的过滤器重叠，而不能被覆盖（替换）。其次，改变 CSS 规则的特殊性似乎并没有改变这些过滤器的应用顺序。这就是我现在正在处理的问题。
正如在此JS Bin中所示，亮度滤镜在反转滤镜之前应用，导致与我需要的效果相反。我需要首先将反转滤镜应用于祖先，然后将亮度滤镜应用于特定的后代。
我提出的唯一解决方案涉及使用 :not() 从祖先过滤器中排除后代，使我能够对后代应用单独的（非重叠）过滤器。然而，这导致我们的单页面应用程序（单个大 DOM）的性能非常差。
关于如何在这种情况下首先应用反转过滤器或其他解决方案有什么想法吗？
*请注意，我需要过滤器来完成这项工作，而不是手动将特定颜色应用于后代元素，因为我实际上正在过滤彩色图像。为了简单起见，我在 JS Bin 中使用了文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body {
-webkit-filter: invert(100%);
}
.normal {
background: white;
}
.brighter {
background: white;
-webkit-filter: brightness(200%);
}
</style>
</head>
<body>
<div class="normal">normal night mode text</div>
<div class="brighter">brighter night mode text</div>
</body>
</html>
你提到的这两件事都不是真正的问题。您可以轻松地覆盖过滤器（如包含浏览器前缀时所见），并根据需要使用特异性来帮助实现此目的。
真正的问题是反转过滤器应用于父级，其中包括所有子级。这是一个问题，因为父级在应用任何过滤器之前等待子级计算（而不是绘制）。这就是它应该如何工作（以及其他视觉效果如何clip-path运作transform）。
因此，您需要通过将反转过滤器应用于除您不希望其应用的元素之外的所有元素，或者以某种方式使用反转过滤器将元素移动到父上下文之外来解决此问题。
可以使用格式应用多个过滤器filter: invert(100%) brightness(200%);。应用程序的顺序是从左到右，这是 CSS 的标准。
| 归档时间： |
|
| 查看次数： |
1371 次 |
| 最近记录： |