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

Question

我在一个 div 中使用了 2 个背景。顶部有一个静态的高度和宽度，它不重复，但它有一个透明度。最下面的是一条1px高的白线，需要repeat-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;
}

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

谁能帮我？

Answer 1

您可以使用: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 */
}