爲商店製作自定義預覽器

-3

我試圖找到一種方法來模擬CSS中的image-mask屬性;目前它在大多數瀏覽器中都不可用。有沒有可以工作的JavaScript庫？爲商店製作自定義預覽器

我想出瞭如何通過用帶扣形狀的透明空間創建白色圖像來完成釦環，然後設置背景顏色，因此背景顏色只能顯示圖像透明的位置。問題是，我無法爲每個部分做到這一點，因爲您不應該看到的白色邊緣可以看到背後部分的顏色（如果您有黑色方塊，然後您使用了該技術得到一個紅色的圓圈，你會最終在一個黑色的正方形上的白色方塊上的紅色圓圈。）

來源

2012-03-18 Ian

你可以發佈代碼嗎？ – 2012-03-18 01:08:54

這聽起來像你使用索引透明度 - 你會想使用PNG圖像與8位阿爾法通道代替。然後有一個< img/\ 7gt;對於你的物品的每個「組成部分」（即一個用於皮帶，一個用於釦環等），然後使用絕對定位將每一個直接放在另一個的上面。 8位透明度將確保它們都看起來正確。

<div id="previewArea"> 
    <img class="layer2" src="buckle{color}.png" /> 
    <img class="layer1" src="belt{color}.png" /> 
    <img class="layer0" src="pants{color}.png" /> 
</div>

當然，您需要一些客戶端腳本來替換所選顏色/設計的每個圖像。

另一種選擇是讓服務器端進程根據給定的參數動態生成圖像，這會導致更簡單的HTML，但對訪問者來說會更慢 - 它可能作爲不支持腳本的客戶端的後備。

來源

2012-03-18 01:08:58 Dai

這裏是一個演示：http://jsfiddle.net/Q77WL/注意紅色之間的空白處。我懷疑這會修復它。我需要能夠用css改變零件的顏色。（最終不會內聯）此外，它將在這些頂部有更多圖層，部分覆蓋紅色。（我試圖出售自定義手鐲。）謝謝，伊恩 – Ian 2012-03-18 01:27:10

**編輯：讓我重新表述自己;我需要一種方法來包含背景顏色，同時使當前的白色位置透明。我認爲這解釋得好一點。** – Ian 2012-03-18 01:38:45

爲商店製作自定義預覽器

回答

相關問題