javascript - 如何添加一个div作为另一个div的背景？

Question

我的目标是为 div 动态生成背景图像。

我有一个函数:

• 在 Canvas 上绘制图像；
• 获取图片的数据URL；
• 创建一个以图片为背景的bgDiv；
• 将 bgDiv 添加到给定的 div 元素。

第三点和第四点的代码如下:

var bgDiv = document.createElement('div');
$(bgDiv).css({
    position: 'absolute',
    left: '0px',
    top: '0px',
    width: '100%',
    height: '100%',
    background: 'url(' + url + ')',
});
$(div).prepend(bgDiv);

问题是:bgDiv 绘制在 div 的子元素前面。我发现这是因为 position: absolute 属性，它是在 bgDiv 上设置的，而在我的例子中，普通 child 没有 position设置。

如何让 bgDiv 元素绘制在所有子元素的底部，无论它们是什么？

---

免责声明:我知道我可以设置 div 的 background-image 属性，但这不足以满足我的目的。

---

我正在最近的 Firefox 中对此进行测试，我需要非常通用的解决方案。

Answer 1

编辑:如果您实际使用 $(div)作为您的选择器，这是一个问题。使用内容<div>的 ID 或类。

编辑 2: 如果您多次执行此操作(使用不同的背景图像)，我会制作 bgDiv一个类，然后动态分配他们的位置。它将为您节省一些 JS。

bgDiv 必须“低于”其余的 div 内容，所以给它一个较低的 z-index 比内容;但是，这可能会导致它落在另一个元素之下。在这种情况下，将 div 的内容设置为更高的 z-index(并将 bgDiv 的 z-index 保留为默认值 auto)。

.bgDiv {
    position: 'absolute';
    z-index:-1;
    /* left: '0px'; Set in JS */
    /* top: '0px';  Set in JS */
    width: '100%';
    height: '100%';
    /* background: 'url(' + url + ')'; Set in JS */
}