CSS3具有多個位置的多個背景圖像

Question

我正在嘗試構建一個使用選項卡按鈕的背景圖像的選項卡菜單系統。

選項卡按鈕圖像高200px，寬40px。因爲我希望這些選項卡的高度可變，所以我想知道所使用的圖像是否可以在選項卡按鈕內部有3個不同的位置，以使其頂部和底部的圓形外觀與中心具有靈活高度。

這是我的嘗試。它沒有產生我想要的結果。這應該如何工作：

background-image:url(tabs-large.png); 
background-position:0 0, 0 20px, 0 180px; 
background-size:100% 20px, 100% 100%, 100% 20px; 

Answer 1

目前，你只有一個background-image。這creates only one layer，所以只有你的0 0位置和100% 20px大小正在使用，其餘的被忽略。

如果tabs-large.png代表整個標籤圖像，則需要將其分爲三部分：例如上邊緣，下邊緣和中間部分，然後在其自己的圖像中指定每個部分。您還需要確保中間部分不會重複頂部和底部邊緣。

下面的代碼是什麼樣子：

background-image: url(tabs-large-top.png), url(tabs-large-middle.png), url(tabs-large-bottom.png); 
background-position: 0 0, 0 20px, 0 180px; 
background-repeat: no-repeat, repeat-y, no-repeat; 
background-size: 100% 20px, 100% 100%, 100% 20px; 

這樣，每個圖像對應於一個位置和一個尺寸，以相同的順序。