打开图标变成黑白

我在我的代码下面的图标：打开图标变成黑白

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

来源

2013-02-27 Dor Cohen

您可以使用2张图像进行此操作。一个用于原件，一个用于黑色/白色 – TNK 2013-02-27 09:27:46

您可以使用photoshop或类似的东西来改变图标 – Jashwant 2013-02-27 09:27:56

使用上述建议的任何异议？ – ianace 2013-02-27 09:28:47

您可以用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); 
}

来源

2013-02-27 09:30:13 Sowmya

谢谢@Sowmya！ – 2013-02-27 11:46:30

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

来源

2013-02-27 09:30:56 Jacob

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

来源

2013-02-27 09:32:20 Tsar

我们如何将它应用于背景图像？ OP将图像作为背景图像，而不是通过IMG标签。 – ryadavilli 2013-02-27 09:34:49

目前支持铬和OP已经提到他需要支持IE8 – Jashwant 2013-02-27 09:37:43

我用这个之前几个网站，它应该是完全跨浏览器兼容：

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-27 09:34:42

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

来源

2013-02-27 09:36:10 Anujith

您可以使用CSS sprites。

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

您可以使用具有并排两个图像下侧图标并通过调整background-position和width和height的background-image

来源

2013-02-27 09:37:01 Jashwant

.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-27 09:38:26

打开图标变成黑白

回答

相关问题