CSS滤镜应用顺序

Question

CSS滤镜应用顺序

htmlcssgoogle-chromecss-filters

5

看起来 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>

- fearlessbryan

当你谈论完全不同的元素时（在这种情况下，祖先与后代），覆盖和应用顺序是完全无关紧要的。这对于任何CSS属性都是正确的，包括filter。 - BoltClock

@BoltClock，重写指替换一个祖先元素中继承的CSS属性，使其在子孙元素中生效。我可以使用其他CSS属性来实现这一点，但是不能用于滤镜。应用顺序指反色之后应用亮度。使用这些定义非常相关。 - fearlessbryan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zach Saucier · Accepted Answer

你提到的两个问题都不是真正的问题。如果需要，您可以轻松覆盖筛选器（例如包含浏览器前缀），并使用特定性来帮助覆盖。

真正的问题在于反转过滤器应用于父元素，包括所有子元素。这是一个问题，因为父元素会等待子元素被计算（而不是绘制）后再应用任何过滤器。这是它应该工作的方式（以及其他视觉效果，如clip-path和transform函数）。

因此，您需要通过将反转过滤器应用于除不想应用于的元素之外的所有元素，或以某种方式将元素移动到具有反转过滤器的父级上下文之外来解决此问题。

可以使用格式filter: invert(100%) brightness(200%);应用多个过滤器。应用顺序从左到右，这是CSS中的标准顺序。