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

时间:2022-12-24 00:23:27

How do I invert colors of an image (jpg/png..) in either css if possible or javascript?

如果可能或javascript,如何在css中反转图像的颜色(jpg / png ..)?

Previous related questions don't give enough detail.

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

4 个解决方案

#1


120  

CSS3 has a new filter attribute which will only work in webkit browsers supported in webkit browsers and in Firefox. It does not have support in IE or Opera mini:

CSS3有一个新的过滤器属性,只能在webkit浏览器和Firefox中支持的webkit浏览器中使用。它在IE或Opera mini中没有支持:

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

#2


10  

Can be done in major new broswers using the code below

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

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

However, if you want it to work across all browsers you need to use Javascript. Something like this gist will do the job.

但是,如果您希望它适用于所有浏览器,则需要使用Javascript。像这样的要点会做这个工作。

#3


2  

You can apply the style via javascript. Js code below.

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

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

And this is the html

这是HTML

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

Now all you need to do is call invert()

现在你需要做的就是调用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>

#4


0  

For inversion from 0 to 1 and back you can use this library InvertImages, which provides support for IE 10. I also tested with IE 11 and it should work.

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

#1


120  

CSS3 has a new filter attribute which will only work in webkit browsers supported in webkit browsers and in Firefox. It does not have support in IE or Opera mini:

CSS3有一个新的过滤器属性,只能在webkit浏览器和Firefox中支持的webkit浏览器中使用。它在IE或Opera mini中没有支持:

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

#2


10  

Can be done in major new broswers using the code below

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

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

However, if you want it to work across all browsers you need to use Javascript. Something like this gist will do the job.

但是,如果您希望它适用于所有浏览器,则需要使用Javascript。像这样的要点会做这个工作。

#3


2  

You can apply the style via javascript. Js code below.

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

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

And this is the html

这是HTML

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

Now all you need to do is call invert()

现在你需要做的就是调用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>

#4


0  

For inversion from 0 to 1 and back you can use this library InvertImages, which provides support for IE 10. I also tested with IE 11 and it should work.

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