带有 CSS 的图像灰度和鼠标悬停时重新着色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7273927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image Greyscale with CSS & re-color on mouse-over?
提问by Meta
I am looking to take an icon that is colored (and will be a link) and turn it greyscale until the user places their mouse over the icon (where it would then color the image).
我正在寻找一个彩色图标（并且将是一个链接）并将其变成灰度，直到用户将鼠标放在图标上（然后它将为图像着色）。
Is this possible to do, and in a way that is IE & Firefox supported?
是否可以这样做，并且以支持 IE 和 Firefox 的方式进行？
回答by Rion Williams
There are numerous methods of accomplishing this, which I'll detail with a few examples below.
有许多方法可以实现这一点，我将在下面通过几个示例进行详细说明。
Pure CSS (using only one colored image)
纯 CSS（仅使用一张彩色图像）
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%);
}
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+, IE10 */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(100%);
/* Chrome 19+ & Safari 6+ */
-webkit-transition: all .6s ease;
/* Fade to color for Chrome and Safari */
-webkit-backface-visibility: hidden;
/* Fix for transition flickering */
}
img.grayscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
svg {
background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}
svg image {
transition: all .6s ease;
}
svg image:hover {
opacity: 0;
}<p>Firefox, Chrome, Safari, IE6-9</p>
<img class="grayscale" src="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" width="400">
<p>IE10 with inline SVG</p>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
<defs>
<filter id="filtersPicture">
<feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
<feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
</filter>
</defs>
<image filter="url("#filtersPicture")" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
</svg>You can find an article related to this technique here.
Pure CSS (using a grayscale and colored images)
纯 CSS（使用灰度和彩色图像）
This approach requires two copies of an image: one in grayscale and the other in full color. Using the CSS :hoverpsuedoselector, you can update the background of your element to toggle between the two:
这种方法需要图像的两个副本：一个是灰度的，另一个是全彩色的。使用 CSS :hoverpsuedoselector，您可以更新元素的背景以在两者之间切换：
#yourimage {
background: url(../grayscale-image.png);
}
#yourImage:hover {
background: url(../color-image.png};
}
#google {
background: url('http://www.google.com/logos/keystroke10-hp.png');
height: 95px;
width: 275px;
display: block;
/* Optional for a gradual animation effect */
transition: 0.5s;
}
#google:hover {
background: url('https://graphics217b.files.wordpress.com/2011/02/logo1w.png');
}<a id='google' href='http://www.google.com'></a>This could also be accomplished by using a Javascript-based hover effect such as jQuery's hover()function in the same manner.
这也可以通过以hover()相同的方式使用基于 Javascript 的悬停效果（例如 jQuery 的函数）来实现。
Consider a Third-Party Library
考虑第三方库
The desaturatelibrary is a common library that allows you to easily switch between a grayscale version and full-colored version of a given element or image.
在去色库是一个公共库，可以让您轻松定元素或图像的灰度版本和全彩色版本之间切换。
回答by Uriah Blatherwick
Answered here: Convert an image to grayscale in HTML/CSS
在这里回答：在 HTML/CSS 中将图像转换为灰度
You don't even need to use two images which sounds like a pain or an image manipulation library, you can do it with cross browser support (current versions) and just use CSS. This is a progressive enhancement approach which just falls back to color versions on older browsers:
您甚至不需要使用听起来很痛苦的两个图像或图像处理库，您可以使用跨浏览器支持（当前版本）并使用 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;
}
and filters.svg file like this:
和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>
回答by Stefan Gruenwald
I use the following code on http://www.diagnomics.com/
我在http://www.diagnomics.com/上使用以下代码
Smooth transition from b/w to color with magnifying effect (scale)
从黑白到彩色的平滑过渡，具有放大效果（比例）
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);
}
