利用jQuery和CSS将背景图片拉伸(使用jquery操作dom)

编辑：rootadmin

推荐整理分享利用jQuery和CSS将背景图片拉伸(使用jquery操作dom)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:使用jquery操作dom,使用jquery操作dom,使用jquery的步骤,jquery.css,jquery使用css选择器来选取元素对吗,jquery.css,使用jquery实现的项目,jquery使用css,内容如对您有帮助，希望把文章链接给更多的朋友！

现在WEB页面设计比较流行使用大背景图，那么您知道如何使用一张大背景图进行拉伸效果呢？也就是说使用一张固定尺寸的背景图片，让它在页面中随着浏览器尺寸进行拉伸，就像我们的电脑桌面壁纸效果。本文将带您一起使用jQuery和CSS实现背景图片拉伸效果。

将背景图片拉伸，而不是平铺，注意平铺效果我们可以使用CSS的background-repeat来实行背景图片的平铺效果，本文讨论的是背景图片的拉伸效果。这种效果在一些前卫的页面设计中已经广泛应用，尤其在一些独立页面，像登录页面使用拉伸的背景图片效果比较常见。目前有两种解决方案可以实现背景图片拉伸效果，一种是CSS，我们可以使用background-size:cover实现图片的拉伸效果，但是IE8及以下版本不支持background-size，于是我们尝试使用微软的滤镜效果，但是IE6不支持，毕竟还有一些后进生在使用IE6。另一种解决方案是使用jQuery，完全解决浏览器的兼容性问题，还是jQuery威武。CSS解决方案我们准备一张背景图片，任意尺寸的，假设我们要做一个登录页面，页面中使用拉升的背景图。我们只需要在body中加入以下代码：

然后CSS这样写：

我们使用background-size实现了背景图片的拉伸效果，但是要兼容IE7,IE8就需要使用滤镜filter来实现，注意该方案中，必须指定容器的高度，本例中指定了height:px。CSS方案有一定的局限性，必须指定容器高度，IE6不兼容，那么比较完美的解决方案就是使用jQuery了。jQuery解决方案我们使用jQuery先向body中动态插入一个DIV，并且该DIV中包含一张图片，也就是我们要求拉伸效果的背景图片。然后使用jQuery获取浏览器窗口的大小，根据浏览器窗口大小，动态设置背景图片的尺寸（宽和高）。

上述代码中，cover()函数就是动态的设置了背景图片的尺寸，通过jQuery的append方法动态加入背景图片，当页面加载完成时已经浏览器窗口变化时都能实现背景图片的拉伸效果，也就是页面ready和resize都调用了cover()函数。

以上两种解决方案，是否都很满意？我比较喜欢jQuery解决方案，总之希望能帮到大家更好地掌握jQuery和CSS使背景图片拉伸的技巧。

jQuery实现有动画淡出效果的二级折叠菜单代码本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码。分享给大家供大家参考，具体如下：这里介绍jQuery实现有动画淡出效果的二级折叠菜单

jQuery实现ctrl+enter（回车）提交表单以jQuery插件开发的方法开发。具体代码如下：jQuery.fn.extend({/***ctrl+enter提交表单*@param{Function}fn操作后执行的函数*@param{Object}thisObj指针作用域*/ctrlSubmit:fun

谈谈Jquery中的children find 的区别有哪些精华：find方法能找子孙，children方法只能找儿子一、Jquery中children语法.children(selector)说明expr是表达式，可选参数，所有选择器中的表达式都可以用在这