将透明图像 (PNG) 保存为背景图像答案

【问题标题】：Saving a transparent image (PNG) as background image将透明图像 (PNG) 保存为背景图像
【发布时间】：2014-10-05 20:52:11
【问题描述】：

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

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

【问题讨论】：

我认为没有画布这是不可能的。也许您想将图像与 PHP 结合起来创建一个新图像？看看这个：stackoverflow.com/questions/1394061/…
我认为您所描述的正是 jquery 自适应背景 (github.com/briangonzalez/jquery.adaptive-backgrounds.js) 和其他诸如颜色小偷 (lokeshdhakar.com/projects/color-thief) 所做的。唯一的问题是它们都使用带有图像的画布。但就像derdida一样，我认为不使用画布是不可能的……你能给我们举个例子，在对象而不是图像上使用它吗？ html中的几个用例？
感谢您的想法和建议。我真正想做的是在 div 中拍摄 Flash 对象的“屏幕截图”。没有现有的插件可以直接执行此操作。我感兴趣的 Flash 对象是 TwitchTV 嵌入对象 (jsfiddle.net/ychggfvc)。彩色叠加 div 是临时的透明图像。

标签： javascript html image

【解决方案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/

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

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

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

【讨论】：