在html中沒有背景的圖片，就像photoshop圖層

Question

我在我的html網頁上有一件襯衫的照片，我想要的是能夠通過點擊一個按鈕來顯示襯衫上的隱藏圖像，但是我希望它成爲襯衫的一部分，就像它是一個隱藏的Photoshop圖層一樣，所以基本上只需點擊一下按鈕就可以循環穿過襯衫上不同的設計，無論如何要做到這一點，或者圖像總是會有一個方形背景？

感謝，

Answer 1

您需要使用JavaScript的組合，並且是絕對定位，隱藏圖像使用CSS。

這張圖片必須是帶有apha透明度的.png。

請注意，Internet Explorer 6不支持透明度，因此如果此瀏覽器在您的目標市場中包含「png修復程序」，如DD_belated。

Answer 2

您可以在頂部看到帶有純色圖像的透視背景，並將圖像放在您的T恤圖像上。但是，並非所有工具都允許您這樣做（例如，Microsoft的繪圖不提供此功能）。我以前使用的一個免費的開源工具具有此功能，它是Paint.net。如果您使用該繪畫程序，請查看「透明度 - Alpha」。

Answer 3

怎麼樣讓你的「襯衫形象」的div的背景和div內具有的更改src屬性有一個簡單的JavaScript的img。 看一看這樣的想法：

HTML

<div id="shirtimagebackground"> 
<img id="overlay" src="overlayX.png"/> 
</div> 

CSS

#shirtimagebackground { 
    background-image: url(shirt.png); 
    width: Xpx; 
    height: Ypx; 
} 
#overlay { 
    width: 100%; 
    height: 100%; 
}