如何设置这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/，我想知道如果我不能重复它，也许我可以把一个横幅放在另一个上面。我尝试使用背景位置，但解决方案无法正常工作。

来源

2012-08-14 user977151

许多问题： - 您使用的是哪种浏览器？ - 你能买得起banner2上的banner2，就像banner2中重叠的banner1 - 你可以在每个背景图像上使用2个元素吗？ – Shadowxvii 2012-08-14 18:48:32

Chrome和Firefox，是的，这是我的第二个建议：把横幅2放在横幅1上，不确定你的意思是第三个问题 – user977151 2012-08-14 19:09:39

您可以有两个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-14 19:18:55 Shadowxvii

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

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-14 19:02:31

如何设置这2个横幅？

回答

相关问题