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

Question

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

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

Answer 1

CSS3有一个新的过滤器属性 ~~这只适用于webkit浏览器~~ 在webkit浏览器和Firefox中受支持.它在IE或Opera mini中没有支持:

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

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

那是因为firefox不是webkit.如果浏览器是webkit,您需要检查,否则通过base64转换进行反转. (4认同)
你是对的,它在Chrome中有效.我很确定这应该可以在Firefox中使用[这里](https://developer.mozilla.org/en-US/docs/CSS/filter):`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>");`但它不......任何想法？ (2认同)

Answer 2

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

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

但是,如果您希望它适用于所有浏览器,则需要使用Javascript.像这个要点的东西将完成这项工作.