css 多个背景，仅重复一个背景

Question

需要有关 CSS 背景重复的帮助。以下是我要实现的功能的 wire-frame。

当前代码：

HTML:

<div class="wrapper">
    <div class="container"></div>
</div>

CSS:

.container{
    min-height: 10000px;
    background-image: url(background1.png), url(background2.png);
    background-repeat: no-repeat, repeat-y;
    background-position: center top, center 1000px;
}

当前代码仅显示一次background1 并根据需要重复background2，但background2 图像从页面顶部开始。我希望它恰好在 background1 图像结束后开始，如线框所示。

注意：图像 background1 和 background2 中都有透明形状，这使得另一个图像在背景中可见。

Answer 1

如果您将背景设置为重复，则不能限制 (AFAIK)

解决方法是限制在一个伪元素上，然后把这个伪元素限制在你想要的地方（带顶属性）

.test {
    width: 300px;
    height: 600px;
    border: solid black 1px;
    position: relative;
}

.test:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 200px;
    background-image: url(http://placekitten.com/g/600/400);
    background-repeat-y: repeat;
}

<div class="test"></div>

请注意，100% 的高度并不准确，如果您希望它准确，请将其设置为您的尺寸

css 多个背景，仅重复一个背景

Multiple background with css, repeat only one background

css

background

background-image