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

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

我有一个函数，它：


在画布上绘制图像；
获取图像的数据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上设置的，而本例中的常规子级没有设置position。

我如何才能将bgDiv元素绘制在所有子项的底部，无论它们是什么？





免责声明：我知道我可以只设置background-image的div属性，但是对于我的目的来说这还不够。





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

最佳答案

编辑：如果您实际上使用$(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 */
}