如何使用css禁用图像的颜色？ [英] How can I disable the color of an image using css?

问题描述

这是一个小问题。如果你去www.thumbtack.com/jobs，并进入下面的赞助商。你可以看到，起初你不能看到赞助商的名称的颜色，但当你悬停在他们，你可以看到颜色出现。有人可以告诉我如何做到这一点。我不知道什么在谷歌搜索（像什么关键字使用它）。我试图使用inspect元素，但不知道如何做。

解决方案

在CSS中最广泛兼容的方法是使用单独的图片 - 一组灰度图像和一组全彩色图像，您可以使用CSS ：hover ：（通常使用 background-image property），a la：

  .sponsor {
 background-image：url .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; 
} 
  

在基于图像的解决方案中， out，它减少了页面加载时间，并且还防止当您第一次鼠标悬停图像时的滞后。此外，它是少一个HTTP请求，这可以在高延迟连接（如手机数据连接）上产生重要影响。

但是，针对相对较新的浏览器，您可以使用CSS筛选器：

  .sponsor {
 filter：grayscale ）; 
} 
 
 .sponsor：hover {
 filter：none;不幸的是，目前只能在Safari，Chrome，Opera的新版本中使用，和其他基于WebKit的浏览器。它目前也是一个前缀属性，因此您需要使用 -webkit-filter 。
 
This is a small question. If you go to www.thumbtack.com/jobs, and go below to their sponsors. you can see that at first you cant see the color in the names of the sponsors but when you hover over them you can see the colors appear. Can someone tell me how to do this. I am not really sure what to search on google(like what keywords to use for it). I have tried to use the inspect element but couldn't figure out how there are doing it. Any help will be greatly appreciated.
解决方案
The most broadly compatible way to do this in CSS is using separate images — one set of grayscale images, and one set of full-color images, which you switch between with the CSS :hover pseudoclass (ordinarily using the background-image property), a la:
.sponsor {
    background-image: url('gray.png');
}

.sponsor:hover {
    background-image: url('color.png');
}
You can achieve this with a single image if you like by putting both a grayscale and color version into a single image, and moving it around kind of like a "window" onto the image (a technique known as CSS Sprites, as pointed out by Jon P). For example, if the logos are 200x100, create a 200x200 image with gray on top and color on bottom, and do something like:
.sponsor {
    width: 200px;
    height: 100px;
    background-image: url('logos.png');
    background-position: 0px 0px;
}

.sponsor:hover {
    background-position: 0px -100px;
}
Of the image-based solutions, this one is preferable, because as Jon pointed out, it reduces the page load time, and also prevents lag when you mouseover the image for the first time. In addition, it's one fewer HTTP request, which can make an important difference on high-latency connections (like cell phone data connections).

If, however, you're targeting relatively new browsers, you might be able to use CSS Filters:
.sponsor {
    filter: grayscale(1.0);
}

.sponsor:hover {
    filter: none;
}
Unfortunately, this currently only works in Safari, Chrome, new versions of Opera, and other WebKit-based browsers. It is also currently a prefixed property, so you will instead need to use it as -webkit-filter.

                        
这篇关于如何使用css禁用图像的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！