Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

image

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?

like image 306
ADH - THE TECHIE GUY Avatar asked Aug 19 '16 08:08

ADH - THE TECHIE GUY


People also ask

How do you invert black to white in CSS?

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.

How do I invert the color of an image in CSS?

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.

Can we invert image with CSS?

The invert() CSS function inverts the color samples in the input image. Its result is a <filter-function> .


2 Answers

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.

like image 156
Reece Kenney Avatar answered Oct 21 '22 06:10

Reece Kenney


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.

like image 25
Bhojendra Rauniyar Avatar answered Oct 21 '22 04:10

Bhojendra Rauniyar