-
绘制背景图片而不是平铺。注重瓷砖效果。我们可以利用CSS的背景重复来实现背景图片的平铺效果。本文讨论了背景图片的拉伸效果，这种效果在一些前卫页面设计中得到了广泛的应用，特别是在一些独立的页面，如登录页面，使用拉伸背景图像。
有两种解决方案可以实现背景图片的效果图，拉伸效果的CSS，我们可以使用背景尺寸：盖实现图片，但是IE8及以下版本不支持背景的大小，所以我们尝试使用微软的滤镜效果，但是IE6不支持IE6，有使用一些学生。另一种方法是使用jQuery完全解决浏览器兼容性问题，或者jQuery。
CSS的解决方案
我们有任何大小的背景图片，假设我们将用背景图绘制一个登录页面，我们只需要在正文中添加以下代码：
…登录表单
然后CSS写这个：
体{ background: url（BG .webp）中心；背景尺寸：封面；身高：900px；宽度：100%；
过滤器：ProgID：DXImageTransform.Microsoft.AlphaImageLoader（SRC = 'bg .webp，sizingmethod =规模'）；}
#主要{位置：绝对的；最高：50%；左：50%；宽度：420px；身高：250px；
保证金：- 00 - 125px 210px；背景：# FFC }
我们使用背景大小实现背景图像的拉伸作用，但以兼容IE7，IE8需要使用滤波器，滤波器实现。我们必须注意容器的高度，并指定高度：在这种情况下900px。
CSS的方法有一定的局限性，必须指定容器的IE6兼容性的高度，然后更完美的解决方案是使用jQuery。
jQuery的解决方案
我们使用jQuery动态地将div插入到主体中，而div包含一个图片，这是我们需要绘制的背景图片，然后使用jQuery获取浏览器窗口的大小，这取决于浏览器窗口的大小，动态设置背景图片的大小（宽度和高度）。
$（函数（）{（））
$（）；
$（# main_bg）。追加（）；
掩护（）；
$（窗口）。调整大小（函数（））浏览器窗口更改
掩护（）；
}）；
}）；
函数覆盖（）{
无功win_width = $（窗口）Width（）；
无功win_height = $（窗口）Height（）；
$（# bigpic）。Attr（{宽度：win_width，身高：win_height }）；
}
上面的代码，封面（）函数是动态设置背景图片的大小，通过动态添加jQuery添加背景图片，当页面被加载到浏览器的背景图片的时候，渲染效果，也就是页面准备和调用封面（调整大小）功能。
以上两种解决方案满意吗我更喜欢jQuery解决方案，总之，这将帮助您更好地掌握jQuery和CSS来拉伸背景图像的技巧。