把图标变成黑白答案

【问题标题】：Turn icon into black&white把图标变成黑白
【发布时间】：2014-01-11 03:08:39
【问题描述】：

我的代码中有以下图标：

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 个图标。

【问题讨论】：

您可以使用 2 张图片来执行此操作。一张原版，一张黑/白
你可以用photoshop之类的来改变图标
对使用上述建议有何异议？
您没有提到同时需要两个图标。您可以为此目的使用精灵。

标签： javascript jquery html css internet-explorer

【解决方案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);
}

【讨论】：

【解决方案2】：

您可以使用filter: grayscale(100%);，尽管目前只有 Chrome 支持。

<a href="#" id="PickUp" class="PickUpIcon">
    <img src='http://i.stack.imgur.com/tVNmr.jpg' class="bw" />
</a>

img.bw {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    width: 24px;
    height: 24px;
    cursor: pointer;
}

http://jsfiddle.net/ruslans/ZK3dY/

source

【讨论】：

我们如何将它应用到背景图像上？ OP 将图像作为背景图像包含在内，而不是通过 IMG 标签。
目前在chrome中支持，OP提到他需要支持IE8

【解决方案3】：

    img { 
     filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    }

【讨论】：

【解决方案4】：

我之前在几个网站上使用过它，它应该是完全跨浏览器兼容的：

element { 
    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");
    filter:gray;
    -webkit-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray(1);
    filter: grayscale(100%);
}

【讨论】：

【解决方案5】：

a { 
width: 24px;
height: 24px;
background: url(http://i.stack.imgur.com/tVNmr.jpg) no-repeat;
cursor: pointer;
display: block;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

Sample

【讨论】：

【解决方案6】：

您可以使用CSS sprites。

适用于任何地方，几乎可以用于每个网站。

您可以通过调整background-position 和width 和height 的background-image 来使用两个图像并排的图标并仅显示图像的一部分

【讨论】：

【解决方案7】：

.PickUpIcon a:hover {
  width: 24px;
  height: 24px;
  background: url(../images/Icons/Answer_grey.jpg) no-repeat;
  cursor: pointer;
}

Answer_grey.jpg 是您的灰色图像。这很简单，并且适用于所有浏览器。有更好的方法将两个图像（绿色和灰色）添加到一个图像并在悬停时更改您显示的图像的哪一部分。这更好，因为您加载了第 1 页的图像并且当您在它上面时它没问题，但是如果您有 2 个图像然后在悬停时您会看到这个图像是如何加载的（如果这个图像很大）。

【讨论】：