php背景图片平铺拉伸,利用jQuery和CSS将背景图片拉伸
现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果。本文将带您一起使用jQuery和CSS实现背景图片拉伸效果。
将背景图片拉伸,而不是平铺,注意平铺效果我们可以使用CSS的background-repeat来实行背景图片的平铺效果,本文讨论的是背景图片的拉伸效果。这种效果在一些前卫的页面设计中已经广泛应用,尤其在一些独立页面,像登录页面使用拉伸的背景图片效果比较常见。
目前有两种解决方案可以实现背景图片拉伸效果,一种是CSS,我们可以使用background-size:cover实现图片的拉伸效果,但是IE8及以下版本不支持background-size,于是我们尝试使用微软的滤镜效果,但是IE6不支持,毕竟还有一些后进生在使用IE6。另一种解决方案是使用jQuery,完全解决浏览器的兼容性问题,还是jQuery威武。
CSS解决方案我们准备一张背景图片,任意尺寸的,假设我们要做一个登录页面,页面中使用拉升的背景图。我们只需要在body中加入以下代码:
...登录表单
然后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("
$("#main_bg").append("");
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使背景图片拉伸的技巧。
php背景图片平铺拉伸,利用jQuery和CSS将背景图片拉伸相关推荐
- html5图片平铺的代码,jQuery图片平铺效果制作网页背景图片平铺代码
插件描述:jQuery图片平铺效果制作网页背景图片平铺代码 调用JS文件 调用插件方法 $(function(){ // 插件初始化 $('img').jqthumb({ classname : 'j ...
- php图片背景平铺,css如何让背景图片平铺?css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
- php如何平铺背景图片,css如何让背景图片平铺?css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
- css 背景平铺 控制范围,css如何让背景图片平铺?css背景图片平铺四种方式介绍...
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
- css如何让背景图片平铺?css背景图片平铺四种方式介绍-前端教程
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
- css如何让背景图片平铺?css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
- html中怎么设置图片平铺,css怎么把图片平铺?
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面. 下面我们来看一下使用css设置图片 ...
- html加入图片如何自动平铺,css怎么让图片平铺?
平铺选项是在网页设计中能够经常使用到的一个选项,例如网页中常用的渐变式背景.采用传统方式制作渐变式背景,往往需要宽度为背景进行平铺. 使用css来设置背景图片同传统的做法一样简单,但相对于传统控制方式 ...
- html网页背景图片平铺代码,jQuery图片平铺效果制作网页背景图片平铺代码
插件描述:jQuery图片平铺效果制作网页背景图片平铺代码 调用JS文件 调用插件方法 $(function(){ // 插件初始化 $('img').jqthumb({ classname : 'j ...
最新文章
- CentOS 7 单用户模式+救援模式
- RabbitMQ核心概念
- 中小型企业开展网站关键词优化,怎样才能达到理想优化效果?
- dcf是ea211发动机吗_大众有的车怎么把ea211换成dcf了?
- php 链接excel表格数据,php 怎么把数据导出到excel表格?php 连接 excel表格数据库数据...
- 怎么用python写名字_python中的__name__ 到底是个什么玩意?应该怎么用到它?
- SCCM2012系列之二,SCCM2012部署前的Active Directory准备
- Quartz2D之绘制一个简单的机器猫
- python代码示例-《Python编程:从入门到实践》DEMO实例代码
- 短期刚需还是未来趋势? 聚焦音视频技术发展方向
- 方差递推公式_常见递推公式(数学)
- c语言程序设混分,若要补位上单怎么选?混分选白起,求稳选吕布,想C位直接选他!...
- 如何做投资--入门篇
- python练习题17
- 3dsmax-角色骨骼
- vue拖动滑块验证组件
- 成为UiBot Store推广员,解锁全新赚钱方式
- 解决Echarts柱形图正负数在同一侧,并设置正负值不同颜色
- 编译原理——自上而下的语法分析方法(LL分析法)
- 用Rstudio写.Sh/Shell文件
热门文章
- Java实现异步的四种方式
- 小米笔记本充电实测追求速度牺牲兼容性小米笔记本充电驱动_1G电影3秒传,最高100W充电,小米有品上线多功能拓展坞...
- 公众号引流如何写好软文?关于软文营销,高度重视高质量的软文
- 解决window.showModalDialog在Firefox无法支持
- 互联网“民工”下的中国 App 工厂
- 工厂操作系统+APP,加速工业数字化转型
- 10次面试9次被刷?其实更多是面试实力和面试技巧不匹配罢了
- oracle多个innerjoin,SQL语句多表inner join的用法
- vb实验第四版答案_Visual Basic程序设计教程(第4版)实验答案.doc
- 在Godday虚拟主机上面配置BlogEngine.NET虚拟目录的处理方法