is it possible to invert an black and white image using css?

Question

I have an black and white image and i just need the inverse(black instead white and white instead of black) of that image. i know that it can be done with image editors,is there any possibility to deal it with css? is there any css property is available to invert an black and white image?

Answer 1

You have the filter property:

.yourImage{
    -webkit-filter: invert(100%); /* Safari/Chrome */
    filter: invert(100%);
}

This will invert the colors as opposed to simply making the image black and white.

Answer 2

You can use filter:

-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);

Or just use invert(1) instead of grayscale(1) invert(1) if you have black and white image.

You can also use invert filter for ie like this:

filter: progid:DXImageTransform.Microsoft.BasicImage(invert=1);
zoom: 1;

For more browser compatibility, see this gist or jQuery.BlackAndWhite plugin.