0

我的目标是为 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的属性div，但这不足以满足我的目的。

 

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

4

2 回答 2

0

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

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

正如@trojansdestroy 所建议的那样，在您的 CSS 中定义了一个 bgDiv 类

.bgDiv {
    position: absolute;
    z-index:-1;
    left: 0; 
    top: 0;
    width: '100%';
    height: '100%';
}
于 2013-07-27T23:46:45.977 回答
0

编辑：如果您实际上$(div)用作选择器，那是一个问题。请改用 content<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 */
}
于 2013-07-27T23:14:57.977 回答