利用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的并行运算实现代码
Nov 19 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
关于Vue中axios的封装实例详解
Oct 20 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
javascript XML数据显示为HTML一例
2008/12/23 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
python中常用的数据结构介绍
2021/01/12 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
如何清空Session
2015/02/23 面试题
中专三年学习的个人自我评价
2013/12/12 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
国际会计专业求职信
2014/08/04 职场文书
学生个人总结范文
2015/02/15 职场文书
2015年幼师工作总结
2015/04/28 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书