1

我的代码中有以下图标：

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

4

7 回答 7

3

你可以用 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：- [演示]

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);
}
于 2013-02-27T09:30:13.930 回答
1

您可以使用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/

来源

于 2013-02-27T09:32:20.107 回答
0 
    img { 
     filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    }
于 2013-02-27T09:30:56.313 回答
0

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

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%);
}
于 2013-02-27T09:34:42.573 回答
0 
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%);
}

样本

于 2013-02-27T09:36:10.200 回答
0

您可以使用CSS 精灵。

无处不在，几乎在每个网站中都使用。

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

于 2013-02-27T09:37:01.373 回答
0 
.PickUpIcon a:hover {
  width: 24px;
  height: 24px;
  background: url(../images/Icons/Answer_grey.jpg) no-repeat;
  cursor: pointer;
}

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

于 2013-02-27T09:38:26.700 回答