网页背景图片拉伸 - jerrylsxu

解决方法有两种：

一种是CSS，使用background-size:cover实现图片的拉伸效果，但是IE8及以下版本不支持background-size，于是可以使用微软的滤镜效果，但是IE6不支持。

<span style="color: #800000;">body</span>{<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;">url(bg.jpg) center center</span>;<span style="color: #ff0000;">background-size</span>:<span style="color: #0000ff;">cover</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">900px</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;"> 
filter</span>:<span style="color: #0000ff;">progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')</span>;} 

另一种是使用jQuery，在body中动态插入一个div，然后在div里包含一张图片，浏览器窗口改变大小时，动态设置背景图片的尺寸。

$(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){ 
    $(</span>"body").append("<div id="main_bg" style="position:absolute;"></div>"<span style="color: #000000;">); 
    $(</span>"#main_bg").append("<img  src="bg.jpg" id="bigpic" alt="网页背景图片拉伸 - jerrylsxu" >"<span   style="max-width:90%">); 
    cover(); 
    $(window).resize(</span><span style="color: #0000ff;">function</span>(){ <span style="color: #008000;">//</span><span style="color: #008000;">浏览器窗口变化 </span>
<span style="color: #000000;">        cover(); 
    }); 
}); 
</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> cover(){ 
    </span><span style="color: #0000ff;">var</span> win_width =<span style="color: #000000;"> $(window).width(); 
    </span><span style="color: #0000ff;">var</span> win_height =<span style="color: #000000;"> $(window).height(); 
    $(</span>"#bigpic"<span style="color: #000000;">).attr({width:win_width,height:win_height}); 
} </span>