利用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方案有一定的局限性，必须指定容器高度，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使背景图片拉伸的技巧。

赞 (0)

相关推荐

  • iOS图片实现可拉伸不变形的处理操作

    在iOS的实际开发中,如果我们把一张有图片(有特别形状的,特别是类似有圆角的图片)放在UIButton中,当UIButton改变大小是,图片可能会被拉伸并且产生变形,我们可以通过-(UIImage *)resizableImageWithCapInsets:resizingMode:方法(通过UIImage对象调用该方法,并且传入要拉伸的图片的名字作为参数)实现返回一个可拉伸不变形的图片,这里我们把这个方法写到UIImage类的分类中把它封装起来,日后的iOS开发中我们可以直接拿来使用: UII

  • iOS应用开发中图片的拉伸问题解决方案

    iOS应用开发中图片的拉伸问题解决方案

    纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能.极强的用户体验.华丽简洁的外观.华丽外观的背后,少不了美工的辛苦设计,但如果开发人员不懂得怎么合理展示这些设计好的图片,将会糟蹋了这些设计,功亏一篑. 比如下面张图片,本来是设计来做按钮背景的: button.png,尺寸为:24x60 现在我们把它用作为按钮背景,按钮尺寸是150x50: 复制代码 代码如下: // 得到view的尺寸  CGSize viewSize = self.view.bound

  • iOS图片拉伸小技巧

    iOS图片拉伸小技巧

    纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能.极强的用户体验.华丽简洁的外观.华丽外观的背后,少不了美工的辛苦设计,但如果开发人员不懂得怎么合理展示这些设计好的图片,将会糟蹋了这些设计,功亏一篑. 比如下面张图片,本来是设计来做按钮背景的: button.png,尺寸为:24x60 现在我们把它用作为按钮背景,按钮尺寸是150x50: // 得到view的尺寸 CGSize viewSize = self.view.bounds.size; // 初

  • iOS图片拉伸的4种方法

    iOS图片拉伸的4种方法

    假如下面的一张图片,是用来做按钮的背景图片的,原始尺寸是(128 * 112) 按钮背景图片.png 我们通过代码将这张图片设置为按钮的背景图片,假如我们将创建好的按钮的宽高设置为:(W=200, H=50)代码如下: // // ViewController.m // iOS图片拉伸总结 // // Created by Sunshine on 15/6/29. // Copyright (c) 2015年 YotrolZ. All rights reserved. // #import "V

  • iOS图片拉伸的方法

    iOS图片拉伸的方法

    假如下面的一张图片,是用来做按钮的背景图片的,原始尺寸是76 × 40 我们通过代码将这张图片设置为按钮的背景图片,假如我们将创建好的按钮的宽高设置为:(W=200, H=50)代码如下: // 初始化按钮 UIButton *button = [[UIButton alloc] init]; // 设置尺寸 button.frame = CGRectMake(100, 200, 200, 50); // 加载图片 UIImage *image = [UIImage imageNamed:@"p

  • iOS图片拉伸的多种方式

    iOS图片拉伸的多种方式

    本文实例为大家分享了iOS图片拉伸的具体代码,供大家参考,具体内容如下 1. UIImageView整体拉伸 UIImageView-contentMode typedef NS_ENUM(NSInteger, UIViewContentMode) { UIViewContentModeScaleToFill, // 默认 拉伸(会变形) UIViewContentModeScaleAspectFit, // 等比例拉伸 UIViewContentModeScaleAspectFill, //

  • iOS图片拉伸技巧小结

    iOS图片拉伸技巧小结

    对于有些图标等按钮 在美工设计的按钮下可以通过拉伸效果处理所需效果,最熟悉的莫过于微信聊天的 椭圆背景,也是通过这个这个原理进行背景图片. 如对该图片拉伸,如何操作? 首先找到要拉伸的部分,很明显 两侧椭圆是不变 要拉伸的是中间部分,如何指定中间部位,先看下图 指定这4个宽度后 会形成黑色模块 直白点就是 这块内容就是拉伸后中间那块不断填充的部分 具体代码: UIImage* img=[UIImage imageNamed:@"2.png"];//原图 UIEdgeInsets edg

  • iOS UIImageView图片自动拉伸功能

    iOS UIImageView图片自动拉伸功能

    本文实例为大家分享了iOS图片自动拉伸的具体代码,供大家参考,具体内容如下 这个是使用一个切片,使其填充到整个NavigationBar上面. - (void)viewDidLoad { [super viewDidLoad]; UIImage *smallImage = [UIImage imageNamed:@"hc_03.png"]; UIImageView *imageView = [[UIImageView alloc] initWithImage:smallImage];

  • jQuery图片特效插件Revealing实现拉伸放大

    点击图片,图片拉伸放大显示,效果非常棒! 使用方法: 1.head区域引用文件 jquery.js,photorevealer.js,datouwang.css 2.在文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码 3.图片个数可以自由增减,增加或者删除<td></td>即可 4.如果图片信息更多,需要更大的空间,可修改photorevealer.js中第36行的数字 核心代码: $(document).ready(functio

  • iOS图片拉伸技巧（iOS5.0、iOS6.0）

    iOS图片拉伸技巧（iOS5.0、iOS6.0）

    纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能.极强的用户体验.华丽简洁的外观.华丽外观的背后,少不了美工的辛苦设计,但如果开发人员不懂得怎么合理展示这些设计好的图片,将会糟蹋了这些设计,功亏一篑. 比如下面张图片,本来是设计来做按钮背景的: button.png,尺寸为:24x60 现在我们把它用作为按钮背景,按钮尺寸是150x50: - (void)viewDidLoad { [super viewDidLoad]; // 得到view的尺寸 CG

随机推荐