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


Posted in Javascript onOctober 16, 2015

现在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使背景图片拉伸的技巧。

Javascript 相关文章推荐
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
基于jQuery实现的菜单切换效果
Oct 16 #Javascript
javascript判断复选框是否选中的方法
Oct 16 #Javascript
jquery判断复选框是否被选中的方法
Oct 16 #Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 #Javascript
js生成随机数的方法实例
Oct 16 #Javascript
jQuery实现商品活动倒计时
Oct 16 #Javascript
js如何打印object对象
Oct 16 #Javascript
You might like
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
微信小程序自定义组件
2017/08/16 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
Python中super的用法实例
2015/05/28 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
西雅图的买手店:Totokaelo
2019/10/19 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
大学新生军训自我鉴定
2014/09/18 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年领班工作总结
2014/11/25 职场文书
搬迁通知
2015/04/20 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
OpenCV实现普通阈值
2021/11/17 Java/Android
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android