在Web中重新着色圖像

我正在嘗試創建一組將用於顯示客戶滿意度的按鈕（想想單選按鈕）。我想讓這些按鈕在未被選中時具有灰度級圖像，然後當它們被選中時用顏色飽和（例如，將圖像中的白色改爲綠色）。我不想使用兩個單獨的圖像：主動選擇器（或其他選擇器），僅僅是因爲我不想讓大量圖像混亂了我已經很重的項目。我已經看到了一些答案，例如使用標籤和重新着色每個像素，但它們看起來非常複雜和笨拙。有誰知道一個（相對）簡單的方法來做到這一點？ enter image description here 在Web中重新着色圖像

來源

2015-07-05 WookieCoder

可能重複的問題：http://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css – ruslan4kad

他們是相似的，但有幾個關鍵的不同之處。我願意使用jQuery或Javascript，而他們正在專門尋找一種CSS方法。此外，他們接受的迴應僅適用於特定的瀏覽器。 – WookieCoder

您可以使用CSS過濾器，但目前只支持Chrome和Safari。

img:hover { 
    filter: grayscale(1); 
    -webkit-filter: grayscale(1); 
    -moz-filter: grayscale(1); 
    -o-filter: grayscale(1); 
    -ms-filter: grayscale(1); 
}

您可以在jsFiddle上看到演示：http://jsfiddle.net/rvb250hx/。我假設它也可以用於單選按鈕。

http://www.paulund.co.uk/css3-image-filters

來源

2015-07-05 21:19:47

我不打算接受這個答案（因爲我想要一個適用於所有瀏覽器的答案），但這非常棒，在Chrome和Safari瀏覽器中完美運行！如果我沒有找到更好的答案，我會完全使用它 – WookieCoder

當然 - 您可以使用不透明度濾鏡和黑色背景，隨時隨地淡入/淡出。這是更多的代碼，但它會產生類似的效果。 –

http://jsfiddle.net/rvb250hx/1/請參閱jsFiddle。它有點給你想要的，但我建議使用過濾器，然後這作爲CSS後備？ –

你可以只使用PNG圖片是透明的，所以每當你想改變顏色，你只需要設置的CSS像。

請參閱[this] [1]小提琴鏈接。與

[1]: http://jsfiddle.net/chiragchavda_ks/okkyn431/

來源

2015-07-06 04:49:05

在Web中重新着色圖像

回答

相關問題