打開圖標變成黑白

我在我的代碼下面的圖標：打開圖標變成黑白

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

打開圖標變成黑白

回答

相關問題