“导航”图像之前和之后答案

【问题标题】：Before and After "Nav" Images“导航”图像之前和之后
【发布时间】：2012-02-06 19:46:57
【问题描述】：

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

这可能很简单，但我们将不胜感激所有和任何帮助。（顺便说一句：我可以处理切片，只需要使用 css 进行定位。）

【问题讨论】：

【解决方案1】：

真的，您只需要两个切片和至少一个包含 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 的背景图片之上。

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

【讨论】：

这很完美，而且有效！谢谢你们的帮助。有时走开一点会有所作为。我离它太近了，甚至无法考虑该解决方案。再次感谢！

【解决方案2】：

我认为您正在寻找 display: inline。

类似的东西

#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>

您可能不得不稍微弄乱页边距。

【讨论】：

【解决方案3】：

CSS3 边框图像可能会工作，但它没有得到很好的支持。

在您的情况下，您可以在伪元素之前和之后创建并为它们提供背景图像，例如：

<!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>

【讨论】：