78

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

以前的 相关问题没有提供足够的细节。

4

4 回答 4

172

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

img {
   -webkit-filter: invert(1);
   filter: invert(1);
   }
<img src="http://i.imgur.com/1H91A5Y.png">

于 2012-11-10T20:30:34.817 回答
11

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

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

但是，如果您希望它适用于所有浏览器，则需要使用 Javascript。像这样的要点将完成这项工作。

于 2015-04-09T11:59:44.237 回答
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>

我们在我们的网站上使用它

于 2017-03-06T12:05:17.247 回答
0

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

于 2016-07-04T09:08:06.487 回答