Html CSS过滤器应用程序顺序_Html_Css_Google Chrome_Css Filters

Html CSS过滤器应用程序顺序

html css google-chrome

Html CSS过滤器应用程序顺序,html,css,google-chrome,css-filters,Html,Css,Google Chrome,Css Filters,CSS过滤器似乎没有遵循与其他CSS属性相同的规则，包括覆盖和应用程序顺序首先，它们只能重叠，不能被子元素中的过滤器覆盖（替换）。其次，改变CSS规则的特殊性似乎不会改变这些过滤器的应用顺序。这就是我现在正在处理的问题如图所示，亮度过滤器在反转过滤器之前应用，产生了与我所需相反的效果。我需要先将反转过滤器应用于祖先，然后将亮度过滤器应用于特定后代我提出的唯一解决方案涉及使用：not（）将子体从祖先过滤器中排除，使我能够对子体应用单独的（非重叠）过滤器。然而，这导致我们的单页应用程序（单个、

CSS过滤器似乎没有遵循与其他CSS属性相同的规则，包括覆盖和应用程序顺序

首先，它们只能重叠，不能被子元素中的过滤器覆盖（替换）。其次，改变CSS规则的特殊性似乎不会改变这些过滤器的应用顺序。这就是我现在正在处理的问题

如图所示，亮度过滤器在反转过滤器之前应用，产生了与我所需相反的效果。我需要先将反转过滤器应用于祖先，然后将亮度过滤器应用于特定后代

我提出的唯一解决方案涉及使用：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>


JS-Bin
身体{
-webkit过滤器：倒置（100%）；
}
.正常{
背景：白色；
}
.光明{
背景：白色；
-webkit过滤器：亮度（200%）；
}
正常夜间模式文本
亮夜模式文本

你提到的两件事都不是真正的问题。您可以很容易地覆盖过滤器（如包含浏览器前缀时所见），如果您愿意，可以使用特定性来帮助您完成此操作

真正的问题是反转过滤器应用于父级，其中包括所有子级。这是一个问题，因为父对象在应用任何过滤器之前等待子对象被计算（而不是绘制）。这就是它的工作原理（以及其他视觉效果，如

剪辑路径

和

变换

功能）

因此，您需要通过将反转过滤器应用于所有元素（不希望其应用于的元素除外）或使用反转过滤器将元素移动到父上下文之外来解决此问题

可以使用格式

过滤器应用多个过滤器：反转（100%）亮度（200%）。应用程序的顺序从左到右，这在CSS中是标准的。
当您谈论不同的元素时，覆盖和应用程序的顺序是完全不相关的（在本例中，是祖先还是后代）。这对于任何CSS属性都是正确的，包括filter@BoltClock By override，我的意思是替换继承自祖先的CSS属性。我可以用其他CSS属性来实现这一点，但不能用过滤器。按应用顺序，我指的是反转后应用的亮度。使用这些定义，它们是非常相关的。换句话说，首先计算子对象，结果是在反转过滤器之前应用亮度过滤器，这就是我提到的。我所说的覆盖是指替换后代中从祖先继承的CSS属性。我可以用其他CSS属性来做这件事，但不能用过滤器。@fearlessbryan。没有其他答案