用於DIV上的可伸縮背景圖像的jQuery插件

Question

我試過研究，但不能想出一個好的jQuery插件，它允許我在可伸縮的同時將背景圖像插入到div上。例如，

可以說我有4周不同的div像這樣：

<div id="one"> 

</div> 

<div id="two"> 

</div> 

<div id="three"> 

</div> 

<div id="four"> 

</div> 

每個＃/ ID/DIV必須有自己獨特的形象，必須調整或可擴展到瀏覽器的寬度和高度。我希望這與IE7 +兼容。如果堆棧溢出社區可以幫助這將是可怕的。

我知道我可以在div上使用background-resize：100％，但只適用於現代瀏覽器。

Answer 1

This link could help you with changing the body background to a scalar image.也許你可以將相同的概念應用到你有divs？

Answer 2

東西我扔在一起，讓你開始。在創建之前設置div的大小，或者爲寬度和高度添加兩個額外的參數。

(function($) { 
    $.fn.bgImage = function(src) { 
    var d=this; 
    var ht=d.html(); 
    var z=parseInt(d.css('z-index')); 
    if(!z) z=0; 
    var oImg=document.createElement('img'); 
    oImg.src=src; 
    oImg.style.width=d.width()+'px'; 
    oImg.style.height=d.height()+'px'; 
    oImg.style.position='absolute'; 
    oImg.style.zIndex=z; 
    d.html(''); 
    d.append('<div id="a" style="position:absolute;z-index:'+(z+1)+';">'+ht+'</div>'); 
    d.append(oImg); 
    }; 
})(jQuery); 

$('#one').bgImage('http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif');