如何添加一个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孩子面前抽。我已经想通了这是因为财产，这是bgDiv设置，而在我的情况下，正规儿童没有position集。

我怎样才能让bgDiv元素绘制在所有孩子的底部，不管他们是什么？

声明：我知道，我可以只设置divbackground-image财产，但它不是足够，我的目的。

我最近Firefox的测试这一点，我需要比较通用的解决方案。

来源

2013-07-27 Hubert OG

使用append而不是前置**编辑**进一步检查后我相信你需要的是将bigDiv的z索引设置为-1 –

为什么？追加会使'bgDiv'成为'div'子元素中的最后一个，所以还有另外一个原因，它应该最后绘制，而我需要首先绘制它。无论如何，我试过这个，没有奏效。 –

我试过'z-index'。 '-1'导致它根本不被绘制。 –

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

编辑2：如果你这样做是多次（具有不同的背景图片）我会做一个bgDiv类，而不是，然后动态地分配自己的立场。它会为你节省一些JS。

bgDiv必须“低于”div内容的其余部分，因此给它比内容的更低的z-index;这可能会导致它落在另一个元素下方，但是。在这种情况下，将div的内容设置为更高的z索引（并将bgDiv的z索引保留为默认的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 */ 
}

来源

2013-07-27 23:14:57 Trojan

您在问题中正确定义了您的问题，您需要让bgDiv在比div的子元素低的位置绘制。换句话说，你需要设置所有儿童的z-index的要高一些，如果你需要以编程方式这样做，那么做

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

与定义的类bgDiv在你的CSS作为@trojansdestroy建议

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

来源

2013-07-27 23:46:45

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

回答

相关问题