Question

我有两个div，一个在另一个之上。在前景div中，我有一个特定维度的透明图像;在背景div中，彩色图像。

我希望能够保存透明图像，使其能够保存＆＃39;底层（背景）图像（因为前景图像是透明的）。我知道这可以使用画布完成，但我想知道是否可以使用画布没有，因为它不能始终使用非图像元素（例如宾语）。

Answer 1

尝试使用以下内容：

#foregroundDiv{
   height:100px;
   width:100px;
   background:url(../path/foregroundimage.png);
}

#backgroundDiv{
   height:200px;
   width:200px;
   background:url(../path/backgroundimage.png);
}

<div id="backgroundDiv">
  <div id="foregroundDiv"></div>
</div>

我假设您已将前景div设为具有透明背景的正确png（或gif）。

此外，您可能需要使用CSS（特别是定位），但这里的关键是您的前景div必须具有明确的大小（如果您的图像被设置为背景），否则，它将默认为本身内部元素的大小（如果没有，则为零）。

这是一个小提琴：http://jsfiddle.net/vj699zd4/

此外，您可以将spunk添加到css中，例如：

#backgroundDiv:hover{
   background:#777777;
   /*or...*/
   /*background:url("../new/background.png");*/
   /*or...*/
   /*opacity:0.75;*/
}

Spunk fiddle：http://jsfiddle.net/0wbxxg08/

将透明图像（PNG）保存为背景图像

1 个答案: