利用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 相关文章推荐
javascript:以前写的xmlhttp池,代码
May 18 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
再谈JavaScript线程
Jul 10 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
基于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 session处理的定制
2009/03/16 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
Prototype Date对象 学习
2009/07/12 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
Python中decorator使用实例
2015/04/14 Python
Python决策树分类算法学习
2017/12/22 Python
python K近邻算法的kd树实现
2018/09/06 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
工程资料员岗位职责
2014/03/10 职场文书
天猫活动策划方案
2014/08/21 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
党员民主评议个人总结
2014/10/20 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android