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過濾器應用程序訂單

回答

相關問題