Css 如何覆盖整个页面宽度，而不考虑用户使用固定手册时的屏幕大小？

我有一个菜单的问题，它是固定的，并集中在页面上。我希望整个菜单（3个背景图像）覆盖整个页面宽度，无论用户的屏幕大小如何

原始图片：

（图1：宽度1px，高度76px；）
（图2：宽度1135px，高度76px；）
（图3：宽度为1px，高度为76px；）

CSS更改后，我希望这些更改成为：

（图1：宽度为392,5px，高度为76px；）
（图2：宽度1135px，高度76px；）
（图3：宽度为392,5px，高度为76px；）

图1
图2，页面中央，无重复
图3

---

我想在图片1和3上设置repeat-x，但不知道宽度。我可以用jQuery修复它，但是CSS中没有办法吗？

更新透明中心图像请参见

HTML

如果您不关心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;
}

---

我建议你发布一张你想要的结果图片，这样会更容易回答“CSS更改后”是什么意思？你希望听到咔嗒声、悬停声等吗？没有。我不会“重复X”来填满站点的宽度。不幸的是，中间的图片是透明的。这几乎是一个解决方案。@Plexus81--我已经更新了，允许使用透明的中心图像。谢谢！它可以工作：）奇怪的是CSS不支持这种开箱即用的方式，比如repeat-x right/left。

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

.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;
}

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