具有透明 PNG 图像的鼠标悬停的灰度效果

Question

我一直在寻找鼠标悬停在图像上的灰度效果，发现这段代码确实有效。但是我遇到了另一个问题，我有透明背景的 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%);
}

非常感谢

Answer 1

您的代码由于语法错误而无法运行，您没有正确关闭评论。除此之外，过滤器应该按预期工作：

body {
  background: gray;
}

img.grayscale {
  filter: url("data:image/svg+xml;utf8,http://www.w3.org/2000/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%);
}

<img src="http://www.lavera.de/fileadmin/_processed_/csm_Avocado-Frei_7fac93857c.png" alt="" class="grayscale">

具有透明 PNG 图像的鼠标悬停的灰度效果

Greyscale Effect on Mouse Hover with Transparent PNG Image

css

svg

grayscale