使用jQuery和CSS将背景图片拉伸

此刻WEB页面计划较量风行行使大配景图，那么您知道怎样行使一张大配景图举办拉伸结果呢？也就是说行使一张牢靠尺寸的配景图片，让它在页面中跟着赏识器尺寸举办拉伸，就像我们的电脑桌面壁纸结果。本文将带您一路行使jQuery和CSS实现配景图片拉伸结果。

将配景图片拉伸，而不是平铺，留意平铺结果我们可以行使CSS的background-repeat来实施配景图片的平铺结果，本文接头的是配景图片的拉伸结果。这种结果在一些前卫的页面计划中已经普及应用，尤其在一些独立页面，像登录页面行使拉伸的配景图片结果较量常见。

今朝有两种办理方案可以实现配景图片拉伸结果，一种是CSS，我们可以行使background-size:cover实现图片的拉伸结果，可是IE8及以下版本不支持background-size，于是我们实行行使微软的滤镜结果，可是IE6不支持，事实尚有一些后进生在行使IE6。另一种办理方案是行使jQuery，完全办理赏识器的兼容性题目，照旧jQuery威武。

CSS办理方案我们筹备一张配景图片，恣意尺寸的，假设我们要做一个登录页面，页面中行使拉升的配景图。我们只必要在body中插手以下代码：

<div id=“main">

 ....登录表单

</div>

然后CSS这样写：

body{background:url（bg.jpg） center center;background-size:cover;height:900px;width:100%; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader（src=‘bg.jpg’， sizingMethod=‘scale’）;} #main{position:absolute; top:50%; left:50%; width:420px; height:250px; margin：-125px 0 0 -210px; background：#ffc}

我们行使background-size实现了配景图片的拉伸结果，可是要兼容IE7，IE8就必要行使滤镜filter来实现，留意该方案中，必需指定容器的高度，本例中指定了height:900px。其它我们要让登录窗口居中，CSS写法参照：怎样让DIV程度和垂直居中

CSS方案有必然的范围性，必需指定容器高度，IE6不兼容，请看DEMO1，那么较量美满的办理方案就是行使jQuery了。

jQuery办理方案我们行使jQuery先向body中动态插入一个DIV，而且该DIV中包括一张图片，也就是我们要求拉伸结果的配景图片。然后行使jQuery获取赏识器窗口的巨细，按照赏识器窗口巨细，动态配置配景图片的尺寸（宽和高）。

$（function（）{

$（“body”）.append（“《div id=‘main_bg’/》”）;

$（“#main_bg”）.append（“《img src=‘bg.jpg’ id=‘bigpic’》”）;

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}）;

}

 上述代码中，cover（）函数就是动态的配置了配景图片的尺寸，通过jQuery的append要领动态插手配景图片，当页面加载完成时已经赏识器窗口变革时都能实现配景图片的拉伸结果，也就是页面ready和resize都挪用了cover（）函数。

文章来历：helloweba.com

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!