在Firefox上,我的对象看起来还不错,但是在Chrome / IE上却有重影。你可以在这里看到它:
http://jsfiddle.net/DFCB3/3/
在其他浏览器上的外观:
http://gyazo.com/0ee27df5904ff3aca036191f69e89cb6.png
我认为这段代码可能与它有关:
<img src="http://upload.wikimedia.org/wikipedia/commons/5/50/Bitcoin.png" class="grayscale"/>
如何使它在Firefox之类的所有浏览器上都能正常工作?
最佳答案
两件事情。首先,您需要将jQuery添加到您的Fiddle中。
其次,您需要更改以下CSS:
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter ….3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
-webkit-transition: all .6s ease;
-webkit-backface-visibility: hidden;
}
对此:
img.grayscale {
position: absolute;
top: 0px;
left: 0px;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter ….3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
-webkit-transition: all .6s ease;
-webkit-backface-visibility: hidden;
}
否则只需将两个img标签设为
position: absolute;
http://jsfiddle.net/FdD5L/
关于javascript - 如何在所有浏览器上使css/js对象相同,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20390447/