在jquery，ajax或純css中重新着色圖像

我正在嘗試構建一個嚮導，我是新來的ajax和jquery。我只是一個HTML/CSS加侖。我正在嘗試這種方式，因爲閃光燈不適用於任何蘋果設備。無論如何，我已經下載http://techlaboratory.net/smartwizard並將建立我的巫師的工作。在jquery，ajax或純css中重新着色圖像

本質上，我建立的是一個嚮導，在每一步都會幫助你建立你的汽車座椅。問題在於有多種類型的顏色可供選擇，然後在其上添加多種插入顏色。例如，你可以選擇一個黑色的座位，但是如果你決定購買一個插入座位，你可以選擇各種顏色，如黃色或藍色或其他。有很多座位顏色+插入顏色，我不想將大量選擇的圖像加載到數據庫中以從中拉出。

我正在考慮做的是保存兩個單獨的PNG圖像文件，一個用於座位，另一個用於插入。如果客戶選擇具有插入功能的座位，則每個座位都有自己的Z-索引，然後使用CSS疊加來爲每個Z-索引着色。問題是我可以爲圖像本身着色而不會將圖像滲出到背景或較低的索引圖像上？也許有更好的方法與阿賈克斯有人知道選擇和更改每個項目的顏色？

來源

2013-04-29 jennc

您可以對圖像進行反透明處理。那麼你可以給容器的背景添加顏色。

HTML

<div class="img-wrap"> 
    <img src="http://i41.tinypic.com/1112z3o.png" alt="" /> 
</div>

和 CSS

.img-wrap { background-color: red; width: 153px; height: 78px; overflow: hidden; }

這裏是一個jsfiddle

另一種方法是使用HTML canvas （儘管這可能會降低性能）

查看相關帖子：Html5 Canvas overlay

來源

2013-04-29 19:09:23 reikyoushin

你我的朋友很棒！從來沒有這樣想過。我認爲這不會解決插入問題，但是我可能能夠避免將這些問題作爲單個圖像加載，因爲插入選項的選項比固定的座位顏色要少。 – jennc 2013-04-29 19:37:27

在jquery，ajax或純css中重新着色圖像

回答

相關問題