在CSS或JavaScript中反转图像的颜色

如果可能的话，如何在CSS中反转图像的颜色（jpg / png ..）？

以前的相关问题没有给出足够的细节。

CSS3有一个新的filter属性 ~~这只能在webkit浏览器中使用~~ 在webkit浏览器和Firefox中都支持。它不支持IE或Opera mini：

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

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

可以使用下面的代码在主要的新的比绍

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

但是，如果您希望在所有浏览器上都可以使用，则需要使用Javascript。像这样的要点就能完成这项工作。

为了反转从0到1，你可以使用这个库InvertImages ，它提供了对IE 10的支持。我还testing了IE 11，它应该可以工作。

您可以通过javascript应用样式。 Js代码如下。

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

这是HTML

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

现在你只需要调用invert（）

 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>