-1
我正在寻找鼠标悬停在图像上的灰度效果,并发现这个代码确实有效。但我得到另一个问题,我有PNG图像透明背景,使用下面的代码填充鼠标悬停上的白色背景。 我确实有使用两个不同背景图像的替代方案,这看起来很干净和简短。 你能否建议应该做些什么修改以及我可以选择哪些替代方案?透明PNG图像对鼠标悬停的灰度影响
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg
xmlns=\'http://www.w3.org/2000/svg\'><filter
id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333
0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/>/filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(100%);
/* Chrome 19+ & Safari
6+ */
}
img.grayscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
非常感谢
感谢阿齐兹但是这个代码已经工作。我的问题是,我使用的是透明背景的PNG图像,在鼠标悬停时使用上面的代码填充白色背景。如何在鼠标悬停的情况下实现PNG图像的透明背景? – Sunil
我无法重现您的问题,悬停时没有白色背景。你使用的是什么浏览器?你在演示中看到白色背景吗? – Aziz
谢谢阿齐兹。图像的父元素显示的不是PNG图像的背景。我的错! – Sunil