利用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模仿msgbox提示效果代码
Jun 10 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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 模拟get_headers函数的代码示例
2013/04/27 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
python 装饰器重要在哪
2021/02/14 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
PHP笔试题
2012/02/22 面试题
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
2014年妇联工作总结
2014/11/21 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书