是否有可能使用jQuery，css等來改變圖像的部分顏色

我有一個圖像顯示不同的煙花。我想使顏色配置所以，說一個組合框：是否有可能使用jQuery，css等來改變圖像的部分顏色

USA（應顏色的焰火紅色，白色和藍色）
聖帕特里克節（應顏色的煙花綠各種色調。
等

，我希望它看起來是這樣的：。

或本：

enter image description here

的焰火都是一個單一的形象，現在，我會想「交融」所選的顏色（因此對於上述＃1，它顯示了紅色，白色和藍色都坐在並排。（與圖像的左側是所有藍色，右側是所有紅色等。）

，所以我有一個形象，我有兩個選擇：

創建一個單獨的圖像下拉菜單中的每個示例。
看看是否有辦法動態改變html頁面中圖片各部分的顏色
其他建議？

我想獲得關於＃2是否可能的反饋，或者我應該堅持＃1。顯然隨着名單變得越來越長，＃1變得更煩人，＃2更具吸引力（如果可能的話）

來源

2011-07-02 leora

那麼我的另一個建議是將煙花作爲面具，倒置，並使用底層背景色拿着它的盒子。

通過這種方式，您可以通過單一的透明度圖像獲得您喜歡的顏色色調。

來源

2011-07-02 12:14:57 Orbling

我已經上傳的圖片作爲我想做的生產實例。你能澄清一下，如果你的方法適合這個嗎？ – leora

@ooo：您不希望使用圖片做到這一點，在大多數情況下，瀏覽器上的延遲會很大，使用'

你如何在Flash/canvas中做到這一點來改變顏色？ – leora

您可以使用png的透明度。按照您希望更改爲透明的地方創建煙花。然後將圖像包裝在div中，該div將使用javascript更改其顏色。

一個示例代碼下面是使用jQuery

$("#green").click(function() { 
    $("div").css("background", "green") 
}); 

$("#yellow").click(function() { 
    $("div").css("background", "yellow") 
});

HTML

<div><img src="path-to-image.png"></div>

演示：http://jsfiddle.net/wyZnc/

來源

2011-07-02 12:23:13 Sotiris

我看到這是如何工作在一個簡單的圖像，但我有成千上萬的不同的煙花，我必須上色。這將如何擴展？（請參見問題圖片） – leora

從使用Photoshop（或其他程序）更改顏色的那一刻起，只需使所需的部件透明即可。然後你可以根據需要修改jQuery。 – Sotiris

這不是我說的嗎？誠然，沒有演示。 ;-) – Orbling

是否有可能使用jQuery，css等來改變圖像的部分顏色

回答

相關問題