无论用户的屏幕尺寸如何，如何使用固定菜单覆盖整个页面宽度？

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替换为伪元素选择器如：

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