使用css的多个背景，只重复一个背景。
使用css的多个背景，只重复一个背景。
提问于 2015-01-12 14:22:49
需要一些帮助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的图像都有透明的形状，这使得另一幅图像在背景中可见。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-01-12 17:23:50
如果将背景设置为重复，则不能限制它(AFAIK)
解决方案是将它限制为一个伪元素，并将这个伪元素限制在您想要的位置(使用top属性)。
.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%的高度是不准确的，如果您希望它精确地设置为您的尺寸。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27904149
复制相关文章
相似问题
腾讯云开发者
