css实现图片反色(反相)效果

css javascript 文章 2022-11-16 09:38 1512 0 全屏看文

AI助手支持GPT4.0

效果如:

image.png

demo:https://www.sanshu.cn/test/imgtest/fanse.html

CSS3有一个新的filter属性 这只能在webkit浏览器中使用 在webkit浏览器和Firefox中都支持。 它不支持IE或Opera mini:

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

可以使用下面的代码在主要的新的比绍

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

但是,如果您希望在所有浏览器上都可以使用,则需要使用Javascript。 像这样的要点就能完成这项工作。

为了反转从0到1,你可以使用这个库InvertImages ,它提供了对IE 10的支持。我还testing了IE 11,它应该可以工作。

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

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

这是HTML

 <img id="theImage" 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" src="http://i.imgur.com/1H91A5Y.png" onClick="invert()" ></img>


-EOF-

AI助手支持GPT4.0