之前和之后“导航”图像

我有一点脑屁。我需要将这个图像分成三部分，分别放置在导航div（“nav”）的左侧和右侧。出于某种原因，我不记得完成这项任务的语义方式。之前和之后“导航”图像

这可能是一个容易的，但所有和任何帮助将不胜感激。（顺便说一句：我能处理的切片，只需要与CSS的定位有所帮助。）

preview http://artjustice.brocknunn.com/q/nav.png

2012-02-06 Brock

真的，你只需要两个切片和至少一个包含div。所以，如果你的标记是这样的：

<div id="nav"> 
    <ul class="nav_ul"> 
     <li>Nav Item</li> 
     <li>Nav Item</li> 
     <li>Nav Item</li> 
    </ul> 
</div>

你实际上已经有了你所需要的一切。然后将图像分成两部分 - 第一部分是宽度的90％，然后是最后10％的宽度（大致 - 刚够得到上限）。您将第一个切片应用于div，然后将第二个切片应用于ul。的排序是这样的：

#nav { 
    background-image: url(slice_left.jpg); 
} 
.nav_ul { 
    background-image: url(slice_right.jpg); 
}

的想法是，该UL的背景图片将出现在顶部的它包含div的背景图像。

您甚至可以返回并编辑第一片（长片）并将背景克隆为额外的几百像素，以防您的导航栏水平增长。

来源

2012-02-06 19:57:35 chipcullen

这是完美的，它的工作！谢谢你们的帮助。有时走开一点会产生变化。我甚至无法考虑这个解决方案。再次感谢！ – Brock 2012-02-06 20:00:14

很高兴帮助！ – chipcullen 2012-02-06 20:30:47

我认为你正在寻找显示：内联。

东西沿着

#navbar { display: inline; } 
<div id="navbar"> 
    <div id="right-image"><img src=rightimage></div> 
    <div id="center-image"><img src=centerimage></div> 
    <div id="left-image"><img src=leftimage></div> 
</div>

线可能必须与边缘有点乱。

来源

2012-02-06 19:53:44 Brian

CSS3的边框图像可能工作，但它不是很好的支持。

在你的情况，你可以前后pseudoelements之后创建，并给他们的背景图像，例如：

<!DOCTYPE HTML> 
<html> 
<head> 
<title>example</title> 
<style type="text/css"> 
nav { 
    position : relative; 
    width : 600px; 
    height : 89px; 
    background : url(/q/nav.png) top center no-repeat; 
    z-index : 1; 
} 
nav:before, nav:after { 
    position:absolute; 
    top : 0; 
    width : 50px; 
    height : 100%; 
    z-index : 2; 
    content : ""; 
} 
nav:before { 
    left : 0; 
    background : url(/q/nav.png) top left no-repeat; 
} 
nav:after { 
    right : 0; 
    background : url(/q/nav.png) top right no-repeat; 
} 
</style> 
</head> 
<body> 
<nav> 
    whatever you need here properly positioned 
</nav> 
</body> 
</html>

来源

2012-02-06 20:22:15 juanrpozo

之前和之后“导航”图像

回答

相关问题