固定菜單，重複-x左邊，重複-x右邊

Question

我有一個固定並居中在頁面上的菜單有問題。無論用戶的屏幕尺寸如何，我都希望整個菜單（3個背景圖像）覆蓋整個頁面寬度。

原單圖片 （圖片1：寬度1px的，高度76px;） （圖片2：寬度1135px，高度76px;） （圖片3：寬度1px的，高度76px;）

CSS更改後我希望這些成爲 （圖片1：寬度392,5px，高度76px;） （圖片2：寬度1135px，高度76px;） （圖片3：寬度392,5px，高度76px ;）

<div style="position:fixed; width:100%; height:76px;"> 
    <div> Picture 1 </div> <-- repeat-x on the left side 
    <div> Picture 2 , center of the page , no-repeat</div> 
    <div> Picture 3</div> <-- repeat-x on the right side 
</div> 

我想在圖片1和3上設置repeat-x，但不知道寬度。我可以用jQuery修復它，但沒有一種方法在CSS中？

Answer 1

更新了透明中心圖像見，http://jsfiddle.net/QEPX4/5/show/

HTML

<div class="TriHeader"> 
    <div class="left"><div></div></div> 
    <div class="center"></div> 
    <div class="right"><div></div></div> 
</div> 

CSS（代表）

.TriHeader { 
    position:fixed; 
    width:100%; 
    height:76px; 
} 

.TriHeader div { 
    height: 76px; 
    position: absolute; 
} 

.TriHeader .left { 
    left: 0; 
    right: 50%; 
    z-index: 0; 
} 

.TriHeader .left div { 
    background: url(repeatingLeftImage.png) top left repeat-x; 
    right: 567.5px; 
    left: 0; 
    top: 0; 
} 

.TriHeader .center { 
    background: url(nonrepeatingCenterImage.png) top left no-repeat; 
    width: 1135px; 
    left: 50%; 
    margin-left: -567.5px; /*ideally, the image would be an even number */ 
    z-index: 1; 
} 

.TriHeader .right { 
    left: 50%; 
    right: 0; 
    z-index: 0; 
} 

.TriHeader .right div { 
    background: url(repeatingRightImage.png) top left repeat-x; 
    left: 567.5px; 
    right: 0; 
    top: 0; 
} 

如果你不關心IE7，那麼你就可以消除在左側和右側嵌套div元素並用僞替換css O單元選擇，如：

.TriHeader .right:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    background: url(repeatingRightImage.png) top left repeat-x; 
    left: 567.5px; 
    right: 0; 
    top: 0; 
}