CSS - 如何添加第二张背景图片答案

【问题标题】：CSS - How to add a second background imageCSS - 如何添加第二张背景图片
【发布时间】：2013-05-19 18:02:00
【问题描述】：

请求：

我正在尝试使我的网站具有沿 x 轴重复的背景，但是当它在 y 轴上完成时，它会显示不同的图像。我希望它继续。

示例：

---------------
|             |
| (ORIGINAL)  | (repeats on x-axis)
|             |
---------------
|  (SECOND)   |
|             |
---------------
|  (SECOND)   |
|             |
---------------
|  (SECOND)   |
|             |
---------------
|  (SECOND)   |
|             |
---------------

（等等）

我将如何做到这一点？

【问题讨论】：

标签： css image background web repeat

【解决方案1】：

使用多背景 CSS3 功能http://www.w3.org/TR/css3-background/#layering

查看http://jsfiddle.net/pWw2A/ 的 jsfiddle 实时示例

 body {
  background: url(http://placehold.it/150x80/ff0000/ffffff) repeat-x,
   url(http://placehold.it/150x50/00ff00/000000) 0 80px repeat-y;                
  }

【讨论】：

非常感谢，这正是我所需要的！我为你打勾了，现在我可以重新使用我的网站了：D
请注意，这仅适用于具有不透明背景的作品，因为第二个背景也会重新呈现到页面顶部。

【解决方案2】：

首先滚动背景可以通过 background-attachment:fixed;

那么对于多个背景，你需要使用 CSS3 像这样：http://www.w3schools.com/css3/tryit.asp?filename=trycss3_background_multiple

本教程可能会帮助您实现您想要的：

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

它有一个很好的例子来说明如何做到这一点（与固定背景混合将或多或少是你想要的）：

http://silverbackapp.com/

希望对您有所帮助！

【讨论】：

感谢您的帮助，但这并不是我想要的。 :(