大海男兒要出征

【問題】

網頁版面要割出一塊做slidebar(要做陰影效果也一樣)

背景圖是一個圓角的長方形

上下圓角各切成一張圖

中間的割一張做repeat

因為這個區塊是要放menu，會有蠻多item，所以圖片都設成div的background

但是上下圓角的圖竟然都出不來!!!

【癥結點1】

要用div去割版面並加上背景圖，重點是：

背景要repeat的那個div要放在最外層

然後包著沒有要repeat的圖片

【癥結點2】

我一開始就預設div的border、padding、margin都是零

所以div一開始都是完全沒內容的，背景圖當然也不會跑出來，因為不是<img>的物件

【解決方式】

1、div的順序很重要，搞錯了圖被蓋住會出不來

2、擺上下圓角的div，設定padding或height(圖的height)讓div有空間就可以了

<div id="leftslidebarwrapper">

    <div id="leftslidebartop"></div>

     Left slide bar content

    <div id="leftslidebarbottom"></div>

</div>

/*CSS*/

#leftslidebarwrapper{

 width:178px;

 margin-left:0px;

 background-image:url(../images/leftslidebg.jpg);

 background-repeat:repeat-y;

}

#leftslidebartop{

 background:transparent url(../images/leftslidebgtop.jpg);

 background-repeat:no-repeat;

 background-position:top left;

 height:14px;

}

#leftslidebarbottom{

 background-image:url(../images/leftslidebgbottom.jpg);

 background-repeat:no-repeat;

 background-position:bottom left;

 height:15px;

}