Question

我的代码中有以下图标：

HTML：

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

CSS：

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

它看起来像是： enter image description here

我想（使用css，js或jQuery）将此图标变为如下所示： enter image description here

意味着将颜色图标变为黑色和白色，是否可能？

我正在使用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);
}

Answer 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

Answer 3

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

Answer 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%);
}

Answer 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

Answer 6

您可以使用CSS sprites。

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

通过调整background-position的{{1}}和width以及height

，您可以使用并排显示两个图片并仅显示部分图片的图标

Answer 7

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

其中Answer_grey.jpg是你的灰色图像。这只是方式而且适用于所有浏览器。将图像（绿色和灰色）添加到一个图像并悬停更改您显示的图像部分有更好的方法。这是更好的，因为你加载第1页图像，当你在它上面它没关系，但如果你有2个图像然后在悬停你看到这个图像加载（如果这个图像很大）。

将图标变为黑色和白色

7 个答案: