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

Question

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

Answer 1

在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.