背景重复：重复-y；起始位置CSS

我在一个div中使用了两个背景。最上面的一个有一个静态的高度和宽度，它不会重复，但它有一个透明度。底部是一条1px高度的白线，需要重复-y。但由于repeat-y占据了包含div的整个高度，因此它也位于透明的顶部背景图像后面。是否可以使底部图像仅在顶部背景下开始重复，而不在左上角重复

哦，我只允许触摸Css文件，所以添加div是没有选择的

.box_area {
    width:925px;
    background: url(../../images/verloop.png), url(../../images/whiteback.png);
    background-position: 0px 0px, 0px 284px;
    background-repeat: no-repeat, repeat-y;
    padding-left:25px;
    margin-left: 25px;
    padding-right:7px;
    float:left;
}

这就是我现在所拥有的，但目前背景职位没有任何作用

---

有人能帮我吗？

您可以使用

：before

选择器添加伪元素，并对其进行定位和样式设置，以便获得您提到的第二个背景。假设518px是第一个背景的高度，下面是将第二个背景置于第一个背景之下的示例CSS

.box_area {
    width:925px;
    background: url(../../images/verloop.png);
    background-position: 0px 0px, 0px 284px;
    background-repeat: no-repeat;
    padding-left:25px;
    margin-left: 25px;
    padding-right:7px;
    float:left;
    position: relative;
}
.box_area:before {
    content: "";
    height: calc(100% - 518px);
    width: 100%;
    background: url(../../images/whiteback.png);
    background-repeat: repeat-y;
    display: block;
    position: absolute;
    top: 518px;
    z-index: -1;
    margin-left:-25px; /* This is to counter the 25px left-padding in .box-container div */
}

---

你能为此设置一个JSFIDLE吗？检查CSS属性

background size

。我可以试试，但是我不能触摸HTML文件。这是一个相当困难的情况，喜欢重建：P@SyncCircles当cms创建一个大于模板的页面时，它需要在高度上不断重复，所以我不能设置静态高度。如果这样做有意义，

background size

CSS属性指定背景图像的大小。请参考。稍加修改，效果相当不错，但100%高度只占屏幕的高度，而不是内容的高度。因此，如果我们的cms创建更高的内容，背景将停止。有什么想法吗？如果您为伪元素指定

height:100%

，它将生成第二个元素，其高度与“.box\u area”元素的高度相同（我想这就是为什么当内容较少时它会占据整个屏幕的原因）。但当我们指定

top:518px

时，即将此伪元素518px放置在“.box_区域”元素顶部下方，我指定的高度518px小于100%，

高度：calc（100%-518px）。注意，我假设518px是verloop.png的高度。用上面两处图像的实际高度替换该数字。