CSS инвертный Filer в Chrome

Question

У меня есть

BODY 
{ 
-webkit-filter: invert(100%); 
-moz-filter: invert(100%); 
-ms-filter: invert(100%); 
-o-filter: invert(100%); 
filter: invert(100%); 
} 

и

.jpg 
{ 
-webkit-filter: invert(0%) !important; 
-moz-filter: invert(0%) !important; 
-ms-filter: invert(0%) !important; 
-o-filter: invert(0%) !important; 
filter: invert(0%) !important; 
} 

Это работает в MIE. Chrome настаивает на инвертировании изображений с классом jpg.

Любые предложения?

Answer 1

От Understanding CSS Filter Effects:

Когда браузер загружает веб-страницу, он должен применить стили, выполнить макет, а затем отобразить страницу, так что есть на что посмотреть. Фильтры выходят после всех этих шагов и непосредственно перед копированием страницы на экран. То, что они делают, это сделать снимок отображаемой страницы в виде растрового изображения, затем выполнить некоторую графическую магию на пикселях в снимке, а затем нарисовать результат поверх изображения оригинальной страницы.

Вы применение фильтра к body, и фильтр применяются ко всему элементу как сведенное изображение, а не каждый ребенок элемент по отдельности, так что вы не можете изменить фильтр на ребенке, как вы» re пытающийся сделать.

Что вы можете сделать в вашем случае применяется invert(100%) к селектору вы хотите, чтобы показать, как неинвертированные, так как двойное перевернутое изображение снова становится нормальным.

Answer 2

Ошибка в первом утверждении. Чтобы исправить это, используйте следующее:

* 
{ 
    -webkit-filter: invert(100%); 
    -moz-filter: invert(100%); 
    -ms-filter: invert(100%); 
    -o-filter: invert(100%); 
    filter: invert(100%); 
} 

.jpg 
{ 
    -webkit-filter: invert(0%) !important; 
    -moz-filter: invert(0%) !important; 
    -ms-filter: invert(0%) !important; 
    -o-filter: invert(0%) !important; 
    filter: invert(0%) !important; 
}