现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果。本文将带您一起使用jQuery和CSS实现背景图片拉伸效果。

利用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方案有一定的局限性,必须指定容器高度,IE6不兼容,那么比较完美的解决方案就是使用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()函数。

以上两种解决方案,是否都很满意?我比较喜欢jQuery解决方案,总之希望能帮到大家更好地掌握jQuery和CSS使背景图片拉伸的技巧。

标签:
jquery将背景图片拉伸,css将背景图片拉伸,jquery拉伸

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“利用jQuery和CSS将背景图片拉伸”

暂无“利用jQuery和CSS将背景图片拉伸”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。