使用 Zurb Foundation 时设置网页背景图片？

Question

我使用浏览器窗口的如下css3 code to make a background image a near perfect 100%：

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

但是，我也使用了 Zurb Foundation 3 css 框架，它会自动使body 元素具有白色背景......所以上面的背景图片被隐藏了。显然我可以覆盖它，但这让我觉得我需要用 Foundation 以一种特殊的方式处理上述背景。真的吗？还是我也需要这个：

body {
  background: transparent !important;
}

Answer 1

我使用 Foundation 5，但不使用图像，而是使用渐变，但如果您想使用图像，同样应该适用。 . .

横幅

<div id="banner">
    <div class="row">
        <div class="small-12 columns">Some Content Here</div>
    </div>
</div>

CSS - 注意宽度和 Z-INDEX 这意味着背景将占据页面宽度的 100%，并且 z-index 会将其置于任何基础其他元素的下方 最好的应用方法是在页面上或在foundation.min.css 之后加载的样式表上，否则它不会覆盖foundation 的预设。

#banner{
    width:100%;
    height:100%;
    min-height:100%;
    z-index:-999;
    background: url(images/bg.jpg) no-repeat center center fixed; 
    margin:0;padding:0;
}

Answer 2

编辑注意：抱歉，我认为您放置的 !important 属性项是 Zurb 代码。无论哪种方式，我都会留下我的答案。

我不熟悉 Zurb Foundation 3，但通常如果开发人员使用 !important 属性，那是因为他们认为它对其余代码至关重要，并且不希望它被覆盖。然而，我们谈论的是一个不继承的背景，因此，我看不出body标签上的背景属性实际上是如何“重要”的，例如，如果你删除它，它会破坏布局。

我正在考虑主体的 z-index 以及开发人员可能希望如何将某些项目放在主体后面，尽管我从未见过这种情况，也不知道您为什么要这样做。此外，我认为负 z-index 应该在身体后面放置一些东西，但是，我们没有看到这种情况发生。看看我试图在身体后面隐藏一个 div 的各种小提琴。

http://jsfiddle.net/W9ckz/1/http://jsfiddle.net/W9ckz/2/http://jsfiddle.net/W9ckz/3/http://jsfiddle.net/W9ckz/4/

因此，除非您能想到另一种方式，即覆盖主体上的背景可能会破坏布局并且可以证明它对该效果构成威胁（与我想到的 z-index 不同），否则我会说去它。最糟糕的情况是您必须撤消它。

I think you can remove the body background
property altogether without side effect.

Answer 3

我会将您的html 的样式应用于body。结果将是相同的，您将覆盖 Foundation 的默认白色背景。