javascript - 把图标变成黑白

Question

我的代码中有以下图标:

HTML:

<a href="#" id="PickUp" class="PickUpIcon"></a>

CSS:

width: 24px;
height: 24px;
background: url(../images/Icons/Answer.jpg) no-repeat;
cursor: pointer;

它看起来像这样:

我想(使用 css、js 或 jQuery)将这个图标变成这样:

意思是将彩色图标变成黑白图标，可以吗？

我正在使用 html 4、CSS2 和 IE 8(我不能使用 HTML5 或其他浏览器)

我知道我可以使用 2 个不同的图标，但我想知道是否还有另一种可能性，因为可以动态添加图标，我不希望每个人都需要提供 2 个图标。

Answer 1

你可以用 SVG 来做

检查这个答案 https://stackoverflow.com/a/8612047/1033200

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

然后使用这个 CSS:- [ Demo ]

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: grayscale(0);
}