Почему -webkit-фильтр не работает для вложенных элементов?

Существует, кажется, проблема с выключением -webkit-filter в хром.Почему -webkit-фильтр не работает для вложенных элементов?

Он также не работает, как я ожидал бы в firefox 34.0.5 или firefox 35, если вы используете свойство css, отличное от браузера, filter.

По-видимому, имущество должно быть быть в наличии, в соответствии с caniuse.

Учитывая следующий фрагмент кода:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style> 
    #outer { 
     background: blue; 
     -webkit-filter: grayscale(100%); 
    } 

    #outer #inner { 
     background: green; 
     -webkit-filter: none; 
    } 
    </style> 
</head> 
<body> 
    <div id="outer"> 
    outer 
    <div id="inner">inner</div> 
    </div> 
</body> 
</html>

Нижняя линия, почему не div#inner получает свой фильтр выключен?

источник

2015-02-03 zealoushacker

Я думаю, вы не понимаете, как работает filter: фильтр не наследуется, как другие свойства CSS, он просто применяется один раз к отображаемому содержимому div. Таким образом, ваш внутренний div не использует фильтр, тогда ваш внешний div, содержащий ваш внутренний div, имеет фильтр, примененный к нему.

filter является композиционной операцией: содержимое внешнего блока визуализируется, затем применяется filter. Вы не можете «отключить» фильтр во внутреннем поле, потому что он не применяется на этом уровне.

Подумайте об этом, как картинка в картинке: у вас есть внешнее изображение, вы вставляете на свое внутреннее изображение, затем берете полученное изображение и применяете эффект серого. Это то, что делает браузер здесь.

В принципе, это работает так:

Visual diagram of compositing process for inner/outer

Если вы хотите работать, вы можете сделать свой внутренний DIV быть на совершенно отдельном слое. То есть сделайте ваш «внешний» div в нижний слой div и сделайте свой «внутренний» div в более высокий слой div, нарисованный выше/перед нижним слоем div, а не содержащийся внутри него:

Visual diagram of compositing process for higher/lower

источник

2015-02-03 01:09:12 Andrea

О, интересно, это кажется настолько странным и полностью противоречивым тому, как CSS должен работать :( – zealoushacker

@zealoushacker Ну, это также такие вещи, как 'alpha',' transform', 'width',' height' и т. Д. В любом случае, я добавил несколько диаграмм и предложил потенциальное решение. :) – Andrea

Надеюсь, это может вам помочь. – Andrea

Почему -webkit-фильтр не работает для вложенных элементов?

ответ

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