html中没有背景的图片，如photoshop图层

Question

我的html网页上有一件衬衫的照片，我想要的是能够通过点击一个按钮来显示衬衫上隐藏的图像，但我希望它能成为衬衫的一部分，就像它是一个隐藏的photoshop图层，所以基本上只需点击一下按钮就会循环通过衬衫本身的不同设计，无论如何要做到这一点还是图像总是会有方形背景？

谢谢，

Answer 1

如何让“衬衫图片”成为div的背景，而div内部img的{​​{1}}用简单的javascript更改src属性。 看看这个想法：

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

Answer 2

你需要使用javascript的组合，以及使用css的绝对定位，隐藏的图像。

此图片必须是具有apha透明度的.png。

请记住，Internet Explorer 6不支持透明度，因此如果此浏览器位于目标市场中，则包含{png fix}，如DD_belated。

Answer 3

您可以在顶部看到带有实心图像的背景，并将图像放在T恤图像上。但是，并非所有工具都允许您这样做（例如，Microsoft的绘图不提供此功能）。我之前使用过的一个免费的开源工具是Paint.net。如果你选择涂料程序，请查看“透明度 - Alpha”。