固定菜单，重复-x左边，重复-x右边

我有一个固定并居中在页面上的菜单有问题。无论用户的屏幕尺寸如何，我都希望整个菜单（3个背景图像）覆盖整个页面宽度。固定菜单，重复-x左边，重复-x右边

原单图片（图片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中？

来源

2011-12-13 Plexus81

我建议你发布你想要的结果的图像，会有很多比较容易回答 – ptriek

你是什么意思“CSS更改后”？你是否期待点击，悬停等？ –

没有。我不想“重复-x”来填充网站的宽度。 – Plexus81

更新了透明中心图像见，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; 
}

来源

2011-12-14 04:55:35 ScottS

不幸的是，中间的图片是透明的。这是接近解决方案.. – Plexus81

@ Plexus81 - 我已更新，以允许透明的中心图像。 – ScottS

谢谢！它的工作原理:)认为奇怪的是，CSS不支持这个开箱即用，就像repeat-x right/left。 – Plexus81

固定菜单，重复-x左边，重复-x右边

回答

相关问题