应用多个重叠的背景图片

Question

我正在构建一个设计，但不确定如何完全实现。这是一个非常粗糙的示例。

http://jsfiddle.net/cgRyH/1/

基本上，我需要一个简单的背景纹理水平重复到无限。在此基础上，在我的内容下方，我需要添加一些比包含我的内容的 div 更宽的背景装饰。在我的示例中，我使用的是一个 div，它的唯一目的是添加这个额外的背景图像...但这似乎很笨重。

有更好的方法来实现这一点吗？

编辑：我的白色页脚需要出现在屏幕底部和两侧以拉伸。

- Vecta

---

我最初有些困惑：您是否希望背景在垂直方向上也无限重复？您说页脚应该是100％，但在fiddle中，它以及内容div都列为100像素。 - Travis J

抱歉造成困惑。页脚的 div 不一定需要是100％的宽度。我只需要页脚看起来全是白色并且在水平和垂直方向上无限延伸即可。 - Vecta

Answer 1

使用CSS3可以实现此目的。这个功能已经得到广泛支持，但像往常一样，在IE系列浏览器中只有IE9及以上版本支持。除此之外，您现在的做法是最理想的。 http://www.css3.info/preview/multiple-backgrounds/

- smdrager

Answer 2

一些评论：

当您尝试拥有一个维度“无限延伸”时，通常会涉及到计算（javascript），因为如果存在滚动条，则100％将不会覆盖整个屏幕。然而，使用图像时有一个巧妙的CSS技巧，它会自动为您拉伸，background-size: cover;。我已经将其作为示例合并到了fiddle中。我还使用CSS为页脚添加了一些内容。由于没有可用的JavaScript，此示例使用了一个大小为整个屏幕的div，并将其z-index值降低，以提供页脚背景颜色。为了使页脚突出，我用黑色背景和白色文本进行了突出显示。您可以进去并将它们更改为相反的（这就是您想要的），但是为了显示效果，我使用了更多的对比度，以便您可以看到效果。

这是示例：http://jsfiddle.net/cgRyH/2/

- Travis J