反转CSS或JavaScript中图像的颜色

69

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

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

javascript css colors

— 滞后反射
source

1

您可以使用html5 canvas。请参阅本教程。

— user197508 2012年

149

CSS3具有新的过滤器属性 ~~仅在webkit浏览器中有效~~ 在webkit浏览器和Firefox中受支持。它不支持IE或Opera mini：

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

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

展开摘要

— 有毒物20
source

在Firefox 16.0.2中无法使用。但是在这里我发现这可以工作：filter: url(data:image/svg+xml;base64,PHN2Z...<long address>...PC9zdmc+#invert);，可以吗？

— laggingreflex

4

那是因为firefox不是webkit。您将需要检查浏览器是否为webkit，否则需要通过base64转换进行反转。

— toxicate20 2012年

2

没错，它确实可以在Chrome中运行。我敢肯定这应该工作在Firefox的说这里：

filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='5' /></filter></svg>");

但它不...任何想法？

— laggingreflex

1

很好，但是非常崩溃。它会反转颜色，但是当我将鼠标移到页面上时，选项卡崩溃。在Google Chrome 25.0.1364.172 x86_64 Linux上进行了尝试。

— panzi

作为一个侧面说明，可以考虑“ contrast（0.1）”过滤器。

— 布里斯

11

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

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

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

— 卡里姆
source

2

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

展开摘要

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

— 萨巴·凯内贾德（Sabba Keynejad）
source

0

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

— CodeMonkey
source