如何在整個頁面寬度上水平重複兩個不同的bg漸變？

我有兩個不同的漸變需要在x軸上重複。一個漸變顯示在我的頁面佈局的左邊，一直到最左邊的瀏覽器窗口，另一個需要從我的頁面佈局的右邊重複到最右邊的瀏覽器窗口。頁面的整個寬度都有一個圖像融合到兩個圖像中，並出現在重複背景之上。如何在整個頁面寬度上水平重複兩個不同的bg漸變？

理想情況下，我可以使用兩個DIV並將它們設置爲50％寬度，然後將960寬度部分放在窗口中心的兩個頂部，但我沒有看到任何方式來執行此操作。

我該如何使用CSS來完成這項工作？我需要支持IE7 +。

來源

2011-11-22 Zoolander

請你可以使用漸變圖像截圖 – sandeep

下面是一個截圖，顯示了一個基本的例子。藍色是主頁面佈局。綠色/紅色漸變需要擴展全瀏覽器寬度。 http://img.skitch.com/20111122-ts119qpcus7ttjitj8cnp1r3u9.png – Zoolander

這應該工作。我只會讓綠色成爲可重複的圖像，並使用背景顏色來製作紅色（以下以「紅色」表示）。

CSS

body { 
    position: relative; 
} 

#left { 
    background: red url(/yourleftimagefile) bottom left repeat-x; 
    position: absolute; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    width: 50%; 
    z-index: 0; 
} 

#right { 
    background: red url(/yourrightimagefile) top left repeat-x; 
    position: absolute; 
    left: 50%; 
    top: 0; 
    bottom: 0; 
    width: 50%; 
    z-index: 0; 
} 

#center { 
    position: relative; 
    z-index: 1; 
    width: 960px; 
    margin: 0 auto; 
}

HTML

<div id="#center"></div> 
<div id="#left"></div> 
<div id="#right"></div>

的HTML呈現靈活的高度，#center但它可以由一個固定的高度。

來源

2011-11-22 17:21:12 ScottS

如何在整個頁面寬度上水平重複兩個不同的bg漸變？

回答

相關問題