Порядок применения CSS-фильтра

Похоже, что фильтры CSS не соответствуют тем же правилам, что и другие свойства CSS, включая переопределение и порядок применения.Порядок применения CSS-фильтра

Во-первых, их можно перекрывать, а не переопределять (заменять), фильтрами в элементах-потомках. Во-вторых, изменение специфики правила CSS, похоже, не изменяет порядок применения этих фильтров. Это проблема, с которой я сейчас сталкиваюсь.

Как видно из этого JS Bin, фильтр яркости применяется перед инвертирующим фильтром, что приводит к противоположному эффекту того, что мне нужно. Мне нужен фильтр инвертирования, который будет применен сначала к предку, и фильтр яркости, который будет применен впоследствии к определенному потомству.

Единственное решение, с которым я столкнулся, включает в себя использование: not(), чтобы исключить потомок из фильтра-предка, позволяя мне применить отдельный (неперекрывающийся) фильтр к потомку. Это, однако, привело к очень низкой производительности в нашем одностраничном приложении (single, large 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-фильтра

ответ

Смежные вопросы