CSS实现背景图尺寸不随浏览器缩放而变化的两种

网页设计中，有些网站的首页背景图尺寸独特，即使在浏览器缩放时，它们依然保持原样。例如，百度个人版首页和花瓣网（huaban）便是如此。这样的效果是如何实现的呢？接下来，我们将通过CSS来这个问题。

你需要一张足够大尺寸的图片。例如，百度背景图的尺寸为16001000px，而花瓣背景图的尺寸为16001600px。为了达成背景图不随浏览器缩放而变化的效果，有两种方法可以使用。

方法一：将图片作为背景

在这一方法中，有几个关键的CSS属性需要注意。首先是background-size: cover。这个CSS3属性能够将背景图像扩展至足够大，以完全覆盖背景区域。如果不使用这个属性，在IE11和FireFox等浏览器中缩放浏览器时，背景图片会随之缩小。我们还需要使用-webkit-background-size: cover和-o-background-size: cover来兼容Webkit内核浏览器和Opera浏览器。另一个重要的属性是background-attachment，当设置为fixed时，页面的其余部分滚动时，背景图像不会移动。

以下是使用这种方法的相关代码（以百度的星空图为例）：

```html

```

方法二：不使用背景图，而是使用标签

这种方法下，图片尺寸不会随浏览器缩放而变化。当页面出现竖直滚动条时，图片会随滚动条移动。实现这一效果，只需将图片的宽度width设置为100%即可。以下是使用这种方法的相关代码（依然以百度的星空图为例）：

```html

```

这两种方法都能实现网站首页背景图在浏览器缩放时不改变尺寸的效果。你可以根据自己的需求和设计选择适合的方法。