我希望获取一个彩色图标（并且将是一个链接）并将其灰度化，直到用户将鼠标放在该图标上（然后它将为图像着色）。
这是否可以做到，并且以 IE 和 Firefox 支持的方式实现？
有许多方法可以实现这一点，我将通过下面的几个示例对其进行详细说明。
纯 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>
你可以找到这里有一篇与该技术相关的文章.
纯CSS（使用灰度和彩色图像）
此方法需要图像的两份副本：一份为灰度副本，另一份为全彩副本。使用 CSS:hover伪选择器，您可以更新元素的背景以在两者之间切换：
#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>
这也可以通过使用基于 Javascript 的悬停效果（例如 jQuery 的）来完成hover()以同样的方式发挥作用。
考虑第三方库
The 去饱和库是一个通用库，可让您轻松在给定元素或图像的灰度版本和全彩版本之间切换。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
