javascript - 将透明图像 (PNG) 保存为背景图像

Question

我有两个 div，一个在另一个上面。在前景div中，我有一个一定尺寸的透明图像；在背景 div 中，有一个彩色图像。

我希望能够以一种同时“保存”底层(背景)图像的方式保存透明图像(因为前景图像是透明的)。我知道这可以使用 Canvas 来完成，但我想知道是否可以不使用 Canvas 来完成此操作，因为它并不总是适用于非图像元素(例如对象)。

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 必须具有明确的大小(如果您的图像被设置为背景)，否则，它将默认为自身内部元素的大小(如果没有则为零)。

这是一个 fiddle :http://jsfiddle.net/vj699zd4/

此外，您还可以向 css 添加勇气，例如:

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

勇气 fiddle :http://jsfiddle.net/0wbxxg08/