如何使用 css 禁用图像的颜色？

这是一个小问题。如果您访问 www.thumbtack.com/jobs，然后转到他们的赞助商。您可以看到，一开始您看不到赞助商名称中的颜色，但是当您将鼠标悬停在它们上方时，您可以看到颜色出现。有人可以告诉我该怎么做吗？我不太确定在谷歌上搜索什么（比如使用什么关键字）。我尝试使用检查元素，但无法弄清楚如何做到这一点。任何帮助将不胜感激。

在 CSS 中实现此目的最广泛兼容的方法是使用单独的图像 — 一组灰度图像和一组全彩图像，您可以通过 CSS 在它们之间进行切换:hover伪类（通常使用background-image属性），a la：

.sponsor {
    background-image: url('gray.png');
}

.sponsor:hover {
    background-image: url('color.png');
}

如果您愿意，可以使用单个图像来实现此目的，方法是将灰度和彩色版本放入单个图像中，然后将其像“窗口”一样移动到图像上（一种称为 CSS Sprites 的技术，如乔恩·P）。例如，如果徽标为 200x100，则创建一个顶部为灰色、底部为彩色的 200x200 图像，然后执行以下操作：

.sponsor {
    width: 200px;
    height: 100px;
    background-image: url('logos.png');
    background-position: 0px 0px;
}

.sponsor:hover {
    background-position: 0px -100px;
}

在基于图像的解决方案中，这个是更可取的，因为正如 Jon 指出的那样，它减少了页面加载时间，并且还可以防止第一次将鼠标悬停在图像上时出现延迟。此外，它还减少了一个 HTTP 请求，这对于高延迟连接（例如手机数据连接）会产生重要影响。

但是，如果您的目标是相对较新的浏览器，则可以使用 CSS 过滤器：

.sponsor {
    filter: grayscale(1.0);
}

.sponsor:hover {
    filter: none;
}

不幸的是，目前这仅适用于 Safari、Chrome、新版本的 Opera 和其他基于 WebKit 的浏览器。它目前也是一个前缀属性，因此您需要将其用作-webkit-filter.