使用CSS3多重背景只有一個重複

我試圖使用CSS3多背景：一個頂部（不重複），中間部分（1px的片重複做容器「擴張」），和底部（不重複）。我遇到的問題是中間部分重複，覆蓋頂部和底部。在IE9，FF6和Chrome中也是如此。這裏是我的代碼：使用CSS3多重背景只有一個重複

#container { 
    margin: 0 auto; 
    width:1093px; 
    background-image: url('WC-Background-Top.jpg'), url('WC-Background-1px.jpg'), url('WC-Background-Bottom.jpg'); 
    background-position: top, middle, bottom; 
    background-repeat: no-repeat, repeat-y, no-repeat; 
}

來源

2011-10-01 nmn5811

把你的頁面使用了標籤<div>，以及有關圖像應用到每個<div>的background-image屬性。這樣，您可以爲後臺重複指定不同的屬性值。

來源

2011-10-01 02:46:00 Fishz

嗯，爲什麼在這個世界上我沒有想到那個？謝謝 – nmn5811

您可以創建爲每個單獨的指定背景三個獨立的div。

#topContainer{background: url('WC-Background-Top.png') no-repeat; } 
#midContainer{background: url('WC-Background-1px.png') repeat-y; } 
#bottomContainer{background: url('WC-Background-Bottom.png') repeat-y; }

這，我相信，是做你想做的最有效的方法。

添加到你所提到的其他款式。如果你想讓它們超出其他元素的流量，請考慮給他們position:absolute。

來源

2011-10-01 02:46:17 sscirrus

使用CSS3多重背景只有一個重複

回答

相關問題