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.

Answer 1

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:

img {     -webkit-filter: invert(1);     filter: invert(1);     }

<img src="http://i.imgur.com/1H91A5Y.png">

Answer 2

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.