加載圖像作爲與jQuery的背景圖像

我想加載圖像作爲父元素的背景。我已經成功了，但問題是我有幾個具有單獨背景的HTML部分。加載圖像作爲與jQuery的背景圖像

有沒有辦法用較少的代碼或任何其他方式做到這一點？

我的代碼：

var imgFileData1 = $('.bg-img1').attr('src') 
    $('#intro').css({'background-image':'url(' + imgFileData1 + ')'}); 
    $('#bg-img1').hide(); 

    var imgFileData2 = $('#bg-img2').attr('src') 
    $('#home').css({'background-image':'url(' + imgFileData2 + ')'}); 
    $('#bg-img2').hide();

和我的HTML看起來像這樣：

<section id="intro"><img id="bg-img1" src="intro.jpg"></section> 
<section id="home"><img id="bg-img2" src="intro.jpg"></section>

來源

2014-12-05 curved

我錯過了什麼？爲什麼不只是用0行的JS代碼放幾個CSS規則？ – 2014-12-05 00:54:38

分配一些class您<section>和<img>標籤

這使得它更容易選擇與jQuery

HTML

<section id="intro" class="load-image"> 
    <img id="bg-img1" class="background-image" src="intro.jpg"> 
</section> 
<section id="home" class="load-image"> 
    <img id="bg-img2" class="background-image" src="intro.jpg"> 
</section>

的Javascript

$(".load-image").each(function() { 
    var self = $(this), img = self.find(".background-image"); 
    self.css("background-image", "url(" + img.attr("src") + ")"); 
    img.hide(); 
});

來源

2014-12-05 00:27:33 Neverever

完美！非常感謝！ :) – curved 2014-12-05 00:36:49

這聽起來像你可能希望創建一個可以使用的通用功能。例如，你可以「標記」您img元素與類...例如：

<img class='moveToParent' ...>

，然後搜索所有這些類：

$(".moveToParent")

現在你有一個圖像列表需要將他們的圖像轉移到父母的背景中。從那裏你可以使用類似的邏輯：

$(".moveToParent").each(i, element) { 
    var imgData = $(this).attr("src"); 
    // Now apply the image to the parent. 
});

來源

2014-12-05 00:28:00 Kolban

加載圖像作爲與jQuery的背景圖像

回答

相關問題