使用多個背景的CSS背景位置

Question

目前，我正在使用多個背景來創建具有固定頂部和底部圖像的面板，並且隨着內容的繼續，使圖像垂直重複。

<div style=" 
background-image: url(top.png), url(center.png), url(bottom.png); 
background-position: top, center, bottom; 
background-repeat: no-repeat, repeat-y, no-repeat; 
width:242px; 
"> 
fgffg<br /> 
fgffg<br /> 
fgffg<br /> 
fgffg<br /> 
fgffg<br /> 
fgffg<br /> 
fgffg<br /> 
fgffg 
</div> 

我遇到的問題是使用不重複，重複-Y，不重複底部圖像被跳過。中心圖像重演到最後！

我需要找出（並做到這一點優雅，乾淨）如何使由y軸中間部分重演，但也留下空間，底部很好地結束我的div塊。

謝謝！

Answer 1

可能問題來自佔據所有空間的中心圖像。

由於它位於底部以上，所以不可見。

只要改變順序：（！最後一個在列表中）重複圖像中的所述第一渲染層然後其他2

background-image: url(top.png), url(bottom.png), url(center.png); 
background-position: top, bottom, center; 
background-repeat: no-repeat, no-repeat, repeat-y; 

Demo

Answer 2

的圖像被放置爲浮動。當放置頂部圖像然後放置中心圖像時，它會覆蓋可用空間，不會留下底部圖像的空間。

因此，改變順序工作得很好。頂部和底部的圖像放置爲無重複，然後剩餘的空間用垂直重複的中心圖像填充。