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?
CSS allows you to invert the color of an HTML element by using the invert() CSS function that you can pass to the filter property. Because the default color of the text is black, the color is inverted into white with filter: invert(100%) syntax.
CSS | invert() Function. The invert() function is an inbuilt function that is used to apply a filter to the image to set the invert of the color of the sample image.
The invert() CSS function inverts the color samples in the input image. Its result is a <filter-function> .
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With