2

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?

Improve this question

2 Answers 2

Reset to default
4

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.

Improve this answer
7
  • Thanks. You can override the filter on a child in MIE, like I mentioned. But if that is what W3C is recommending I don't know. I did think about doing the double thing for Chrome. I'll try that now.
    – Ole Sørensen
    Commented Jun 28, 2013 at 1:14
  • Yep. That worked! Great step forward. :) It sadly also inverted the Facebook profile photos thumbs in Chrome. (Not in MIE). But this is way better than what I had. That Facebook Like button thing is almost impossible to customize anyways.
    – Ole Sørensen
    Commented Jun 28, 2013 at 1:27
  • Do we know why there is talk about -moz-filter and -o-filter around, when, as far as I can see, there is no filter support in Firefox and Opera. Just a hope for what might soon work?
    – Ole Sørensen
    Commented Jun 28, 2013 at 1:31
  • I'm not sure, I'm confused about which browsers support it. caniuse says it's only on WebKit, but the article in my answer says Firefox also. IE isn't mentioned in any of them, but if you're seeing results maybe it's triggering their old, deprecated filters.
    – freejosh
    Commented Jun 28, 2013 at 12:53
  • Nice theory about triggering Microsoft's deprecated filters. Could be it. People do keep claiming it forks in FF. For instance here: webmasterworld.com/css/4030964.htm. I also just found out there's yet another prefix: -khtml for Konqueror.
    – Ole Sørensen
    Commented Jun 28, 2013 at 13:16
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;
}
Improve this answer
2
  • I didn't know * could stand alone like that in CSS. Also, it didn't work for me. But your answer did get me to try to fix this issue again, and it seems to be working in all browsers now. Thanks yo.
    – Ole Sørensen
    Commented Jan 20, 2016 at 23:29
  • It's recommended to stay away from the "universal selector" due to performance (especially with no additional selectors), this could also get wonky as well because each element will get its own filter so you may have filters on filters where some invert the previous filter. I would recommend you use it on the html selector to avoid positioning issues and to have a single filter. You could then just do invert(100%) on the .jpg selector to reverse the original invert.
    – CTS_AE
    Commented Jan 22, 2020 at 0:57

Not the answer you're looking for? Browse other questions tagged or ask your own question.