Best IT Recipes

Invert image colors in CSS or JavaScript

How to invert image colors (jpg / png ..) in css, if possible, or javascript?

Previous related questions do not provide enough details.

+46
javascript css colors
Nov 10 '12 at 20:27
source share
4 answers

CSS3 has a new filter attribute which will only work in webkit browsers in webkit browsers and in Firefox. It does not have support in IE or Opera mini:

img { -webkit-filter: invert(1); filter: invert(1); } 
 <img src="http://i.imgur.com/1H91A5Y.png">
+104
Nov 10 '12 at 20:30
source share

Can be done in large new browsers using the code below

 .img { -webkit-filter:invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); }

However, if you want it to work in all browsers, you need to use Javascript. Something like this gist will do the job.

+10
Apr 09 '15 at 11:59 on
source share

To invert from 0 to 1 and vice versa, you can use this InvertImages library, which provides support for IE 10. I also tested IE 11 and it should work.

0
Jul 04 '16 at 9:08
source share

You can apply the style through javascript. Js below.

 function invert(){ document.getElementById("theImage").style.filter="invert(100%)"; }

And this is html

 <img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png"></img>

Now all you have to do is call oververt ()

 function invert(){ document.getElementById("theImage").style.filter="invert(100%)"; } 
 <h4> Click image to invert </h4> <img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png" onClick="invert()" ></img>
0
Mar 06 '17 at 12:05
source share


More articles:


All Articles