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

Question

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

Previous related问题没有提供足够的细节。

Answer 1

CSS3有一个新的过滤器属性，它只适用于webkit浏览器和Firefox中的webkit浏览器 supported。它在IE或Opera mini中没有支持：

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

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

Answer 2

可以使用以下代码在主要的新浏览器中完成

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

但是，如果您希望它适用于所有浏览器，则需要使用Javascript。像this gist之类的东西可以胜任。

Answer 3

您可以通过javascript应用该样式。这是下面的Js代码，它将过滤器应用于ID为theImage的图像。

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

这就是

<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>

我们在website

上使用此功能

Answer 4

对于从0到1的反转并返回，您可以使用此库InvertImages，它提供对IE 10的支持。我还使用IE 11进行了测试，它应该可以工作。