CSS过滤器应用程序订单

似乎CSS过滤器不遵循与其他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>

来源

2016-04-04 fearlessbryan

当你谈论完全不同的元素（在这种情况下，祖先与后代）时，覆盖和应用顺序是完全不相关的。对于任何CSS属性都是如此，包括过滤器。 – BoltClock

@BoltClock通过覆盖我的意思是替代继承自后代的祖先的CSS属性。我可以使用其他CSS属性来完成此操作，但不能使用过滤器。按照应用顺序，我的意思是在反转后应用亮度。使用这些定义他们是非常相关的。 – fearlessbryan

你提到的两件事都不是真正的问题。您可以轻松地覆盖过滤器（如浏览器前缀所包含的那样）并使用特殊性来帮助您完成此操作。

真正的问题是倒置过滤器应用于包含所有孩子的父级。这是一个问题，因为在应用任何过滤器之前，父母等待孩子被计算（不绘）。这是它应该如何工作（以及其他视觉效果如clip-path和transform函数）。

因此，您需要通过将倒置过滤器应用于除了您不希望应用的元素之外的所有元素或以某种方式使用倒置过滤器将元素移动到父上下文之外来解决此问题。

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

来源

2016-04-05 04:18:15

换句话说，首先计算儿童，结果是亮度滤波器应用在反转滤波器之前，这就是我所提到的。通过重写，我的意思是替换继承自后代的祖先的CSS属性。我可以使用其他CSS属性来完成此操作，但不能使用过滤器。 – fearlessbryan

@fearlessbryan没错。没有其他答案 –

CSS过滤器应用程序订单

回答

相关问题