网页背景图片拉伸 - jerrylsxu-html教程-PHP中文网

网页背景图片拉伸 - jerrylsxu

php中文网

发布： 2016-05-21 08:35:05

原创

1462人浏览过

解决方法有两种：

一种是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里包含一张图片，浏览器窗口改变大小时，动态设置背景图片的尺寸。

js+css3带全屏背景图片切换网页日历特效

一款js+css3带全屏背景图片切换网页日历特效

查看详情

$(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){ 
    $(</span>"body").append("<div id='main_bg' style="position:absolute;"/>"<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>

登录后复制