Html 如何设置这两个横幅？

我目前正在为一个俱乐部建立一个网站，我需要帮助修复横幅。共有2个横幅，第一个横幅将重复几次，第二个横幅将最后显示。例如：

[ banner 1 ][ banner 1 ][ banner 1 ][ banner 1 ][ banner 2 ]

横幅1基本上是一些重复的装饰，横幅2是徽标

问题是我无法让banner#1停止重复，这样banner#2就可以出现。到目前为止，这是我正在使用的CSS：

#banner
{   
    background-image    : url(images/banner1.jpg), url(images/banner2.jpg);
    background-repeat   : repeat-x, no-repeat;
    min-height      : 175px;
}

---

有没有办法按照我想象的方式去做？我去过这个网站：我想知道如果我不能重复，也许我可以把一条横幅放在另一条上面。我尝试使用背景位置，但解决方案无效。

您必须定义重复元素的宽度：

HTML:

<div class="banner1"></div><div class="banner2"></div>

---

现场演示：

您可以有两个具有自己背景的

div

HTML:

<div class="banner1">
    <div class="banner2">
    </div>
</div>

---

如果您想要两个div并排或一个在另一个之上，这取决于您自己。许多问题：-您使用的是什么浏览器？-你能负担得起把横幅2放在横幅1的上面吗，就像横幅2重叠的横幅1一样-你能用两个元素来搭配他们的背景图片吗？Chrome和firefox，是的，这是我的第二个建议：把横幅2放在横幅1的上面，不知道你说的第三个问题是什么意思

.banner1 {
    width: 200px;
    height:50px;
    background: url('http://jsfiddle.net/img/top-bg.png') repeat-x;
}

.banner2 {
    width:50px;
    float:right;
    height: inherit;
    background-color: red;
}