Question

我尝试过研究，但是无法想出一个好的jQuery插件，它允许我在可扩展的同时将背景图像插入到div中。例如，

让我们说我有4个不同的div：

<div id="one">

</div>

<div id="two">

</div>

<div id="three">

</div>

<div id="four">

</div>

每个＃/ id / div必须拥有自己独特的图像，并且必须调整大小或扩展到浏览器的宽度和高度。我希望这与IE7 +兼容。如果Stack Overflow社区可以帮助那将是非常棒的。

我知道我可以在div上使用background-resize：100％，但只适用于现代浏览器。

Answer 1

This link could help you with changing the body background to a scalar image.也许你可以将同样的概念应用到你所拥有的div中？

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');

DIV上可扩展背景图像的jQuery插件

2 个答案: