html - 在第一张图片下重复第二张背景图片

Question

我正在尝试使用 background-image 的 2 个实例在一个<div>层。第一个background-image (部分透明)应显示在 top的 <div> , 第二个应直接显示在第一个 background-image 下方(这有效)。

由于动态内容，第二张图片的高度为 1px应垂直重复 ( repeat-y ) 并在第一个 background-image 下开始重复.我的问题是当我尝试重复第二个时 background-image它在整个 <div> 上重复层。

.mainFrameRoundBorder {
    border: none; 
    background: url(../images/theme_box_main_l.png), url(../images/theme_box_main_2.png);
    background-repeat: no-repeat, repeat-y;
    border-radius: 0 0 0 0;
    box-shadow:0 0 0 0;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-position: center top, 0px 364px;
    margin-top:10px;
    padding: 6px 15px;
    overflow: hidden;
    color: #FFFFFF;
}

Answer 1

我建议使用 :before 或 :after 伪选择器。您可以像往常一样将重复背景放在 div 上，然后将非重复背景放在伪选择器元素中。

本教程应该能够为您提供有关此方法的一些很好的指导:

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/