与css的多个背景，重复只有一个背景

Question

需要CSS背景重复方面的帮助。下面是我想要实现的功能的线框。

当前代码：

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）

解决方案是将其限制为伪元素，并将此伪元素限制在您想要的位置（使用top属性）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请注意，100％的高度不准确，如果您希望它准确设置为您的维度