今天有个同事问我怎么拉伸背景图片,一直没有想过这个问题,既然被人家问倒了,就得学习研究一番了。因此我总结了三个拉伸背景图片的方法,结合了CSS+html+jquery三个技术,不需要很大的图片,不过拉伸后图片会有失真,如果你的网站背景图片要求不是很真很清晰,可以参考哦。
方法一:CSS方法,这个方法有个缺陷,就是要定死高度,而且不兼容IE。
无标题文档body{width:100%; height:700px; margin:0; url(p_w_picpaths /banner11.jpg) no-repeat; padding:0; background-size:100% 100%;) ;
}
拉伸背景图片
方法二:jquery+CSS,都兼容
无标题文档body{width:100%; height:100%; margin:0; padding:0;}
$(function(){
$("body").append("
$("#main_bg").append("");
cover();
$(window).resize(function(){//浏览器窗口变化
cover();
});
});
function cover(){
var win_width=$(window).width();
var win_height=$(window).height();
$("#bigpic").attr({width:win_width,height:win_height});
}
方法三:html+css,这是个死办法,呵呵,但是兼容性很好。
无标题文档body{width:100%; height:100%; margin:0; padding:0;}
#main_bg,#bigpic{width:100%; height:100%;}