如何設置這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個橫幅？

回答

相關問題