背景重复：垂直重复；起始位置CSS。

Question

背景重复：垂直重复；起始位置CSS。

4

我在一个单一的 div 中使用了两个背景。顶部背景具有固定的高度和宽度，并且不重复，但是它具有透明度。底部背景是 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;
}

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

有人能帮助我吗？

- Goos van den Bekerom

你能为此设置一个 JSfiddle 吗？ - James King

检查CSS属性background-size。 - Pugazh

我可以试试，但是我无法接触HTML文件。而且重建起来相当困难呢 :P - Goos van den Bekerom

@SyncCircles 当CMS创建的页面大于模板时，它需要在高度上保持重复，因此我无法设置静态高度。如果这有意义的话。 - Goos van den Bekerom

background-size CSS 属性指定了背景图片的大小。请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size。 - Pugazh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rohan Doshi · Accepted Answer

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