Question

请求：

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

实施例

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

（等）

我将如何做到这一点？

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/

希望它有所帮助！

CSS - 如何添加第二个背景图像

请求：

实施例

2 个答案: