4

我使用以下css3 代码使背景图像接近完美 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;
}
4

3 回答 3

2

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

横幅

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

CSS - 注意 WIDTH 和 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;
}
于 2014-04-27T17:50:25.713 回答
0

我会应用你html的风格来body 代替。结果将是相同的，您将覆盖 Foundation 的默认白色背景。

于 2013-02-06T12:18:46.707 回答
0

编辑注意：对不起，我认为您放置的 !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.
于 2013-02-06T06:46:07.990 回答