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图像对鼠标悬停的灰度效应

1 个答案: