我正在寻找一个带颜色的图标（并将成为链接），并将其变成灰度，直到用户将鼠标放在该图标上（然后该图标将对该图像进行着色）。
是否可以这样做，并且以IE和Firefox支持的方式进行？
Answers:
有多种方法可以完成此操作，下面将通过一些示例详细说明。
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
img.grayscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
这种方法需要图像的两份副本：一份是灰度的，另一份是全彩色的。使用CSS :hoverpsuedoselector，您可以更新元素的背景以在两者之间切换：
#yourimage {
background: url(../grayscale-image.png);
}
#yourImage:hover {
background: url(../color-image.png};
}
这也可以通过以hover()相同方式使用基于Java的悬停效果（例如jQuery的功能）来实现。
在去色库是一个公共库，可以让您轻松定元素或图像的灰度版本和全彩色版本之间切换。
在这里回答：在HTML / CSS中将图像转换为灰度
您甚至不需要使用听起来很痛苦的两个图像或一个图像处理库，就可以通过跨浏览器支持（当前版本）来做到这一点，而只需使用CSS。这是一种渐进的增强方法，只是在较旧的浏览器上只能使用彩色版本：
img {
filter: url(filters.svg#grayscale);
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(1);
/* Google Chrome & Safari 6+ */
}
img:hover {
filter: none;
-webkit-filter: none;
}
和filters.svg文件是这样的：
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
</filter>
</svg>
我在http://www.diagnomics.com/上使用以下代码
从黑白到彩色的平滑过渡，并具有放大效果（比例）
img.color_flip {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE5+ */
-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
-webkit-transition: all .5s ease-in-out;
}
img.color_flip:hover {
filter: none;
-webkit-filter: grayscale(0);
-webkit-transform: scale(1.1);
}