css invert filer in Chrome

Question

I have

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

and

.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;
}

This works in MIE. Chrome insists on inverting also the pictures with the jpg class.

Any suggestions?

Answer 1

From Understanding CSS Filter Effects:

When a browser loads a web page it needs to apply styles, perform layout and then render the page so there's something to look at. Filters kick in after all those steps and just before the page is copied to the screen. What they do is take a snapshot of the rendered page as a bitmap image, then perform some graphics magic on the pixels in the snapshot and then draw the result over the top of the original page image.

You're applying a filter to the body, and the filter is applied to the whole element as a flattened image, not each child element individually, so you can't override the filter on a child like you're trying to do.

What you can do in your case is apply invert(100%) to the selector you want to show up as uninverted, because a double inverted image becomes normal again.

Answer 2

The error is in the first statement. To fix it use the following

*
{
    -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;
}