基本CSS橫幅

Question

我相信這一定很容易，但我遇到了問題！

我想要的效果是每個頁面上的橫幅或頁眉的純色塊，其中將是一些文本。但是，爲了增加一些花邊，我做了一個小圖片，讓每個側面都是一個從橫幅顏色變爲白色的小方塊。所以整體效果是一個很好的條紋，結束漸變。我希望你明白這個主意。

這裏是我的代碼：

<div class="mini_banner_l"></div> 
<div class="mini_banner">Hey '.$member_name.', your account is not activated yet !</div> 
<div class="mini_banner_r"></div> 

而且我的CSS迄今作業：

.mini_banner_l { 
background: no-repeat url(../gfx/frills/infobar_end_l.png); 
display:inline-block; 
} 

.mini_banner_r { 
background: no-repeat url(../gfx/frills/infobar_end_r.png); 
display:inline-block; 
} 

.mini_banner { 
background: #57a7b5; 
display:inline-block; 
} 

CSS從來不是我的強項，也許有更好的方法來達到這種效果（？ ）但我的問題是沒有任何東西顯示在頁面上的褪色結束應該是，但他們出現後，我添加一些文本，例如：

<div class="mini_banner_l">now it shows</div> 
<div class="mini_banner">Hey '.$member_name.', your account is not activated yet !</div> 
<div class="mini_banner_r"></div> 

有關如何使其工作的任何想法，或更好的方式來做到這一點非常感謝：D 謝謝！

Answer 1

只需將寬度和高度添加到下面的CSS中，並將寬度&高度更改爲寬度&圖形的高度。

.mini_banner_l { 
background: no-repeat url(../gfx/frills/infobar_end_l.png); 
width:100px; 
height:100px; 
display:inline-block; 
} 

.mini_banner_r { 
background: no-repeat url(../gfx/frills/infobar_end_r.png); 
width:100px; 
height:100px; 
display:inline-block; 
} 

.mini_banner { 
background: #57a7b5; 
display:inline-block; 
}