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

Question

要求：

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

例子：

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

（ETC。）

我将如何做到这一点？

Answer 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;                
  }

Answer 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/

希望能帮助到你！