-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/我想知道我是否不能重复它，也许我可以把一个横幅放在另一个上面。我尝试使用背景位置，但解决方案不起作用。

4

2 回答 2

0

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

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

于 2012-08-14T19:02:31.717 回答
0

你可以有两个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 并排或一个在另一个上，这取决于您

于 2012-08-14T19:18:55.530 回答