Question

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

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

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

我该怎么做？

这是我尝试过的：

>>> import yaml
>>> def load_yaml_file(filename):
...     with open(filename, 'rt') as f:
...         data = yaml.load(f)
...     return data
...
>>> from unittest import mock
>>> mocked_open = mock.mock_open(read_data='{"hello":"world"}')
>>> with mock.patch("__main__.open", mocked_open):
...     result = load_yaml_file("foobar.yaml")
...
>>> print(result)
{'hello': 'world'}
>>> mocked_open.mock_calls
[call('foobar.yaml', 'rt'),
 call().__enter__(),
 call().read(4096),
 call().read(4096),
 call().__exit__(None, None, None)]

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

我认为一个大问题是，背景重复仅适用于一次和两个图像。

Answer 1

一切正常。问题在于背景问题。我不了解语法。在上面的示例中，它从左侧对齐600px，并与顶部对齐。我认为这意味着距顶部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;

CSS背景重复与多个图像

这是我尝试过的：

1 个答案: