Invert colors of an image in CSS or JavaScript

Question

How do I invert colors of an image  jpg png    in either css if possible or javascript   Previous related questions don t give enough detail

User · Accepted Answer

CSS3 has a new filter attribute which will only work in webkit browsers supported in webkit browsers and in Firefox  It does not have support in IE or Opera mini    x000D   x000D  img   x000D     -webkit-filter  invert 1   x000D     filter  invert 1   x000D       x000D   lt img src  http   i imgur com 1H91A5Y png  gt  x000D   x000D   x000D

User · Answer

For inversion from 0 to 1 and back you can use this library InvertImages  which provides support for IE 10  I also tested with IE 11 and it should work

User · Answer

You can apply the style via javascript  This is the Js code below that applies the filter to the image with the ID theImage   function invert    document getElementById  theImage   style filter  invert 100         And this is the    lt img id  theImage  class  img-responsive  src  http   i imgur com 1H91A5Y png  gt  lt  img gt    Now all you need to do is call invert   We do this when the image is clicked    x000D   x000D  function invert    x000D  document getElementById  theImage   style filter  invert 100     x000D    x000D   lt h4 gt  Click image to invert  lt  h4 gt  x000D   x000D   lt img id  theImage  class  img-responsive  src  http   i imgur com 1H91A5Y png  onClick  invert     gt  lt  img gt  x000D   x000D   x000D    We use this on our website

User · Answer

Can be done in major new broswers using the code below   img       -webkit-filter invert 100         filter progid DXImageTransform Microsoft BasicImage invert  1        However  if you want it to work across all browsers you need to use Javascript  Something like this gist will do the job

[javascript] Invert colors of an image in CSS or JavaScript

Examples related to javascript

Examples related to css

Examples related to colors