实现网页背景图片拉伸的两种方法

针对背景图片拉伸效果的实现，我们有两种解决方案。我们可以使用CSS中的background-size属性来实现图片的拉伸效果。具体代码如下：

将背景图片的URL设置为body元素的背景，然后通过background-size:cover属性让图片覆盖整个元素区域，实现拉伸效果。这种方法的优点是简单易用，但需要注意，IE8及以下版本的浏览器不支持background-size属性。对于这些浏览器，我们可以使用微软的滤镜效果进行兼容处理。遗憾的是IE6浏览器并不支持这种滤镜效果。

HTML与CSS代码如下：

```html

body {

background: url(bg.jpg) center center;

background-size: cover;

height: 900px;

width: 100%;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');

}

```

以下是相应的jQuery代码：

```javascript

$(function() {

$("body").append("

$("main_bg").append("");

cover();

$(window).resize(function() {

// 当浏览器窗口变化时，重新执行cover函数

cover();

});

});

function cover() {

var win_width = $(window).width();

var win_height = $(window).height();

$("bigpic").attr({ width: win_width, height: win_height });

}

```

以上两种方法可以根据实际需求选择使用。无论选择哪种方式，都可以实现背景图片的拉伸效果，让网页背景更加美观且适应不同的屏幕大小。请注意，在实际使用中需要确保图片的URL路径正确，并根据实际情况调整CSS样式和jQuery代码。