Question

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

这可能是一个简单的，但所有和任何帮助将不胜感激。（顺便说一下：我可以处理切片，只需要帮助定位css。）

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

Answer 1

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

的内容

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

您可能需要稍微弄乱边距。

Answer 2

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

你甚至可以返回并编辑第一个切片（长切片）并克隆背景以获得额外的几百个像素，以防你的导航水平增长。

Answer 3

CSS3 border-image可能有效，但支持不好。

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

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

“导航”图像之前和之后

3 个答案: