Question

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

我有一个功能：

在画布上绘制图像;
获取图像的数据URL;
使用图片作为背景创建bgDiv;
将bgDiv添加到给定的div元素。

以下是第3点和第4点的代码：

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的{{1}}属性，但这对我的目的来说还不够。

我在最近的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 */
}

Answer 2

您在问题中正确定义了问题，您需要将bgDiv绘制在低于div子项的位置。换句话说，你需要将所有孩子的z-index设置得更高，如果你需要以编程方式执行此操作，那么

var bgDiv = $('<div class="bgDiv">').css('background', 'url(' + url + ')');
$(div).children().css({zIndex,2});
$(div).prepend(bgDiv);

在你的CSS中使用已定义的类bgDiv作为@trojansdestroy建议

.bgDiv {
    position: absolute;
    z-index:-1;
    left: 0; 
    top: 0;
    width: '100%';
    height: '100%';
}

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

2 个答案: