CSS背景图拉伸效果兼容FF/Chrome/IE等主流浏览器(亲测)

首先我们来讲一下如何用CSS实现背景图的拉伸效果，这个效果可以让背景图随着浏览器窗口大小的变化而自动拉伸，从而达到更好地适应不同设备的效果。具体步骤如下：

1. 首先，需要设置html和body元素的高度为100%。这可以通过以下CSS样式实现：

html, body {
  height: 100%;
}

这个设置是为了保证后面的背景图能够充满整个窗口。

1. 接下来，需要为背景图设置一个自适应的背景尺寸。这里我们使用CSS的background-size属性。如果我们想让背景图随着窗口的大小自动拉伸，可以将background-size设置为cover，具体样式如下：

body {
  background-image: url("background.jpg");
  background-size: cover;
}

这样设置后，背景图会自动被拉伸，从而始终充满整个窗口。

1. 最后，我们还可以使用CSS3新增的background-attachment属性来控制背景图的滚动效果。如果我们希望背景图固定不动，可以将background-attachment设置为fixed，具体样式如下：

body {
  background-image: url("background.jpg");
  background-size: cover;
  background-attachment: fixed;
}

这样设置后，背景图将始终固定在窗口中，不会随着滚动条的滚动而移动。

接下来我们来看一下两个示例：

示例一：

假设我们有一张背景图，它的尺寸为1280x720像素。我们想让它始终拉伸以适应窗口大小。可以使用如下代码：

html, body {
  height: 100%;
}

body {
  background-image: url("background.jpg");
  background-size: cover;
}

这样设置后，背景图会始终保持充满窗口，适应各种屏幕大小。

示例二：

有时候我们可能想要让背景图随着滚动而移动，这个效果通常用于网站的头部或者尾部。可以使用如下代码：

html, body {
  height: 100%;
}

body {
  background-image: url("background.jpg");
  background-size: cover;
  background-attachment: fixed;
}

这样设置后，背景图不仅会自动拉伸，还会随着鼠标的滚动而移动，从而创造出动感的效果。

以上就是CSS背景图拉伸效果的兼容性攻略，经过亲测，这种设置方式在FF、Chrome、IE等主流浏览器中都能够正常兼容。希望对你有所帮助。