由3張圖片製成的容器的CSS

Question

正如標題所說，我試圖製作一個頂部帶有不重複圖片的容器，中間的圖片將垂直重複，底部的圖片因此，我的問題是我無法正確地消除它們之間的填充，我試過了，但如果我在該容器中添加了一些內容，它就會讓人失望。我需要是我如何正確刪除這些填充並顯示內容的間隙的指導。

我已經做了一個簡單的「演示」更清晰。

Answer 1

這樣做。每個盒子的高度都會變化！

<div id"box"> 
    <div class="top_image"><!-- --></div> 
    <div class="mid-image"> 
    <p>Hello World!</p> 
    </div> 
    <div class="bottom_image"><!-- --></div> 
</div> 

你的CSS：

#box div.top-image { 
    background: url(img/top-image.png) 0 0 no-repeat; 
    height: //Your height; 
} 

#box div.mid-image { 
background: url(img/mid-image.png) 0 0 repeat-y; 
} 

#box div.bottom-image { 
    background: url(img/bottom-image.png) 0 0 no-repeat; 
    height: //Your height; 
}