悬停时的黑白 CSS 背景

【问题标题】：Black and white CSS background on hover悬停时的黑白 CSS 背景
【发布时间】：2013-12-20 00:52:07
【问题描述】：

我有一个类似的 CSS 精灵：

HTML

<a id="estates" href="http://www.domain.com/estate"></a>

CSS

#estates {background-position: -200px 0px;width: 96px;height: 90px;}

#estates {background: url("http://www.domain.com/images/sprite.png") no-repeat scroll 0% 0% transparent;float: left;margin: 22px -2px 30px 33px;}

我希望用户将鼠标悬停在链接上以将图像颜色更改为黑白，或者如果无法实现，我可能会覆盖透明 png？

【问题讨论】：

标签： html css

【解决方案1】：

您可以查看 CSS 灰度过滤器。大致是这样的：

#estates:hover {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */;
}

~~只是不要忘记添加跨浏览器支持所需的其他一百件事~~

我找到了其他一百个东西并添加了它们。

【讨论】：

您需要用于 firefox 的 grayscale.svg 文件，对吗？除了下载它并将其放在同一个文件夹中，您还可以使用它： filter: url("data:image/svg+xml;utf8,#灰度"); /* Firefox 10+，Android 上的 Firefox */
This article 提供了一些背景信息。