1

如何对多个图像使用背景重复？主要背景图像是静态的，仅位于未滚动页面的顶部。

一旦用户开始在较长的页面上向下滚动，就会有一个辅助背景图像，而不是与第一个图像混合。

对于长页面，此图像会无限重复（如有必要）。

我怎样才能做到这一点？

这是我尝试过的：

background-image:
    url(../images/background/large/static.png),
    url(../images/background/large/repeat.png);
background-repeat:
    no-repeat,
    repeat-y;
background-position:
    0px top,
    600px top;

static.png 背景页面位于顶部，显示范围为 0 到 600px。然后 repeat.png 从 600px 开始，并在必要时不断重复到无穷大。静态页面应该只在最顶部显示一次。有什么建议么？谢谢！

我认为一个大问题是，background-repeat 只应用于两个图像。

4

1 回答 1

1

一切正常。问题在于背景位置。我不明白语法。距离左侧 600 像素并与顶部对齐就是上面示例中所说的内容。我认为它的意思是距离顶部 600 像素。当我尝试使用实数时，它会将图像放在右侧的屏幕之外，让人感觉它不起作用。我现在理解语法并且一切正常。谢谢！

background-image:
    url(../images/background/large/static.png),
    url(../images/background/large/repeat.png);
background-repeat:
    no-repeat,
    repeat-y;
background-position:
    left top,
    left 600px;
于 2018-11-25T13:45:07.670 回答