在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%; 
}