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

【问题标题】：background-repeat: repeat-y; starting position CSS背景重复：重复-y；起始位置 CSS
【发布时间】：2014-02-26 22:34:38
【问题描述】：

我在一个 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;
}

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

谁能帮帮我？

【问题讨论】：

你能为此设置一个 JSfiddle 吗？
检查 CSS 属性 background-size.
我可以尝试，但我无法触摸 HTML 文件。喜欢重建是一个相当困难的情况：P
@SyncCircles 当cms创建的页面大于模板时，它需要在高度上不断重复，所以我不能设置静态高度。如果这有意义
background-size CSS 属性指定背景图像的大小。请参考developer.mozilla.org/en-US/docs/Web/CSS/background-size。

标签： css

【解决方案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 */
}

【讨论】：

稍作改动后效果很好，但 100% 高度取的是屏幕的高度，而不是内容的高度。因此，如果我们的 cms 创建更高的内容，则背景将停止。有什么想法吗？
如果为伪元素指定height:100%，它将生成与“.box_area”元素高度相同的第二个元素（我猜这就是为什么当内容较少时你会看到它占据整个屏幕的原因） .但是当我们指定top:518px，即将此伪元素放置在“.box_area”元素顶部下方518px处，我指定高度518px小于100%，height: calc(100% - 518px);。请注意，我假设 518px 作为 verloop.png 的高度。将该数字替换为上面两个位置该图像的实际高度。