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

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

---

问题没有给出足够的细节。

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

img{
-webkit过滤器：倒置（1）；
过滤器：反转（1）；
}

---

可以使用下面的代码在主要的新兄弟中完成

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

---

但是，如果您想让它在所有浏览器上都工作，就需要使用Javascript。类似的东西可以完成这项工作。

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

您可以通过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>

单击图像以反转

在Firefox 16.0.2中不工作。但我发现这是可行的：

filter:url（数据：image/svg+xml；base64，PHN2Z……PC9zdmc+#invert），是吗？那是因为firefox不是webkit。你需要检查一下浏览器是否是webkit，或者通过base64转换进行反转。你说得对，它在Chrome中确实可以工作。我很确定这应该在Firefox中起作用，正如前面所说：
filter:url（“数据：image/svg+xml；utf8，”）但它不。。。有什么想法吗？很好，但是很粗糙。它会反转颜色，但当我将鼠标移到页面上时，选项卡会崩溃。尝试使用谷歌浏览器25.0.1364.172 X86Y64 Linux。作为一个旁注，你可以考虑对比度（0.1）`过滤器。你可以使用HTML5画布。看见