用jQuery和CSS拉伸背景图片

现在网页设计中使用大背景图片很流行，那么你知道如何使用大背景图片来达到拉伸效果吗？也就是说，使用一个固定大小的背景图片，让它在页面中随着浏览器大小拉伸，就像我们电脑桌面的壁纸效果一样。本文将带你使用jQuery和CSS来实现背景图片的拉伸效果。

拉伸背景图片，而不是平铺它。注意平铺效果。我们可以利用CSS的背景重复来实现背景图片的平铺效果。本文讨论背景图片的拉伸效果。这种效果在一些前卫的页面设计中得到了广泛的应用，尤其是在一些独立的页面中，比如使用拉伸背景图片的登陆页面。目前实现背景图片拉伸效果的方案有两种，一种是CSS，我们可以使用background-size:cover来实现图片的拉伸效果，但是IE8及以下不支持background-size，所以我们尝试使用微软的滤镜效果，但是IE6没有，毕竟有些后进生还是用IE6。另一个解决方案是用jQuery彻底解决浏览器的兼容性问题，或者说jQuery是不可一世的。我们准备了一张任意大小的背景图片。假设我们要制作一个登录页面，其中背景图片被拉起。我们只需要在正文中添加以下代码：

Div id='main '.登录到表单/div，CSS编写如下：

body{background:url(bg.jpg)中心中心；背景尺寸：封面；高度：900 px；宽度：100%；filter : progid : maximagettransform。Microsoft . alpha imageloader(src=' BG . jpg '，sizing method=' scale ')；} # main { position:absolutetop :50%；左侧：50%；宽度width:420px高度：250 px；margin :-125 px 0 0-210 px；Background:#ffc}我们使用背景大小来实现背景图片的拉伸效果，但是为了兼容IE7，IE8需要使用滤镜来实现。请注意，在此方案中，必须指定容器的高度，在此示例中，指定了height:900px。CSS方案有一定的局限性，所以必须指定容器高度，而且IE6不兼容，所以完美的解决方案是使用jQuery。jQuery解决方案我们使用JQuery动态地在正文中插入一个DIV，DIV中包含一张图片，也就是我们需要拉伸效果的背景图片。然后使用jQuery获取浏览器窗口的大小，并根据浏览器窗口的大小动态设置背景图片的大小(宽度和高度)。

$(function(){ $('body '))。追加(' div id=' main _ BG '/')；$('#main_bg ')。追加(' img src=' BG . jpg ' id=' big pic ')；cover()；$(窗口)。resize(function(){ //浏览器窗口更改封面()；});});函数cover(){ var win_width=$(window)。宽度()；var win_height=$(窗口)。高度()；$('#bigpic ')。attr({width:win_width，height : win _ height })；}在上面的代码中，cover()函数动态设置背景图片的大小，并通过jQuery的append方法动态添加背景图片。当页面加载完毕，浏览器窗口发生变化时，可以实现背景图片的拉伸效果，即页面就绪和调整大小都调用cover()函数。

以上两种解决方案是否令人满意？我比较喜欢jQuery解决方案，总之希望能帮助大家更好的掌握jQuery和CSS拉伸背景图片的技巧。