Question

我在一个div中使用2个背景。顶部有一个静态高度和宽度，它不重复，但它有透明度。底部是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;
}

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

任何人都可以帮助我吗？

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 */
}

background-repeat：repeat-y;起始位置CSS

1 个答案: