Question

这是一个小问题。如果你去www.thumbtack.com/jobs，请到他们的赞助商下面。您可以看到，首先您无法看到赞助商名称中的颜色，但当您将鼠标悬停在赞助商名称上时，您可以看到颜色显示。有人能告诉我怎么做。我不确定要在google上搜索什么（比如要使用哪些关键字）。我试图使用inspect元素，但无法弄清楚它是如何做到的。任何帮助将不胜感激。

Answer 1

在CSS中最广泛兼容的方法是使用单独的图像 - 一组灰度图像和一组全彩图像，您可以使用CSS :hover伪类切换它们（通常使用“background-image属性”，la：

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

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

如果您愿意，可以通过将灰度和彩色版本放入单个图像中，并将其类似于“窗口”移动到图像上来实现这一目标（称为CSS Sprites的技术，如Jon 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。

Answer 2

您可以使用CSS3：

.object {
    -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 */;
}

.object:hover {
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
    filter: none;
    filter: none;
    filter: none;
}

或者您可以使用background: url()并以相同的方式在悬停时更改它。

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

2 个答案: