如何添加一個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作爲另一個背景？

回答

相關問題