CSS инверторный файл в 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

Из понимания эффектов фильтра CSS:

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

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

Что вы можете сделать в вашем случае это применить 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;
}