CSS背景图片如何固定全屏，即使缩放页面

Question

我正在尝试使用CSS实现这样的效果：

我希望将页面背景图片全屏固定，以下代码可以实现此功能：

body
{
    background: url(../img/beach.jpg) no-repeat fixed 100% 100%;
}

现在我可以验证窗口确实填充了该图像，至少在我的 Firefox 3.6 上有效。

然而，当我尝试缩放页面时 (ctrl+-/+)，它就出问题了，图像只是随着页面缩放而被拉伸或缩小。

是否有更好的纯 CSS 方法来解决这个问题？我没有找到一个适合背景图像的好属性。

或者我应该考虑使用 jQuery 在运行时操作宽度和高度？它们都设置为 100%，所以我想那应该“一如既往”地工作 :(

提前感谢任何建议！

- Michael Mao

---

最后的两个值，即两个100%，指的是背景位置，而非大小。http://reference.sitepoint.com/css/background-position - Yi Jiang

很遗憾，这些CSS在IE8上不起作用...有没有其他方法可以让它在IE8和IE7上工作？ - MuntingInsekto

Answer 1

还有另一种技巧

使用

background-size:cover

就是这样。 完整的 CSS 集合如下：

body { 
    background: url('images/body-bg.jpg') no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
} 

现代浏览器都支持默认属性。

- Ranjith Siji

Answer 2

我以前使用过这些技术，它们都很有效。如果您阅读每种技术的优缺点，就可以决定哪种适合您的网站。

或者，如果您想避免上述技术中的错误，则可以使用全尺寸背景图像jQuery插件。

- Pat

---

哎呀！从没想过会有一个适用于这种情况的jQuery插件 :) - Michael Mao

@Michael 我发现几乎每件事情都有一个 jQuery 插件 ;) - Pat

Answer 3

您可以使用普通的 CSS 来完成很多操作...CSS 属性“background-size”可以设置多种内容，正如 Ranjith 指出的那样，不仅限于 “cover”。

“background-size: cover” 将图像缩放到覆盖整个屏幕，但如果屏幕和图像的宽高比不同，则可能意味着一些图像在屏幕外面。

一个好的选择是 “background-size: contain”，它将调整背景图像的大小以适应较小的宽度和高度，确保整个图像可见，但是如果宽高比不同，则可能会出现黑边。

例如：

body {
      background: url(/images/bkgd.png) no-repeat rgb(30,30,30) fixed center center;
      background-size: contain;
     }

我认为不太实用的其他选项有： background-size: length <widthpx> <heightpx>，该选项设置背景图像的绝对大小。 background-size: percentage <width> <height>，该选项将背景图像设置为窗口大小的百分比。 （参见w3schools.com页面）

- WorkingMatt

Answer 4

请在您的CSS文件中添加以下内容：

.custom_class
 {
    background-image: url(../img/beach.jpg);
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 }

然后，在您的 .html（或 .php）文件中像这样调用该类：

<div class="custom_class">
   ...
</div>

- dafNou

Answer 5

像这样直接使用

.bg-div{
     background: url(../img/beach.jpg) no-repeat fixed 100% 100%;
}

或者单独调用CSS，例如：

.bg-div{
    background-image: url(../img/beach.jpg);
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

- subindas pm

Answer 6

这是一个简单的程序代码，实现全页面背景图片缩放时可以在样式/CSS中应用width:100%即可：

position:absolute; width:100%;

- rajapandian