Question

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

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

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

问题是我不能让横幅＃1停止重复，所以横幅＃2可以显示出来。到目前为止，这是我正在使用的CSS：

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

有没有办法像我想象的那样去做？我去过这个网站：http://www.css3.info/preview/multiple-backgrounds/我想知道我是否不能重复它，也许我可以把1个横幅放在另一个上面。我尝试使用后台位置，但解决方案无效。

Answer 1

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

<强> HTML：

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

<强> CSS：

.banner1, .banner2 {
    display: inline-block;
    height: 150px;
}
.banner1 {
    width: 75%;
    background: url('http://jsfiddle.net/img/top-bg.png') repeat-x;
}
.banner2 {
    width: 25%;
    background: red;
}

现场演示：jsFiddle

Answer 2

你可以有两个divs拥有自己的背景

HTML：

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

CSS：

.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;
}

jsFiddle

如果你想要两个div并排在另一个

，这取决于你

如何设置这两个横幅？

2 个答案: