Question

我目前尝试制作带有图像的导航栏，导航栏应位于中间，图像在两侧上重复显示。然而，图片仅在右侧重复。有人有解决方案吗？

＆＃13;

#leftHalf {
   background: url(images/bg-1.jpg);
   width: 50%;
   position: absolute;
   left: 0px;
   height: 100%;
}
#rightHalf {
   background: url(images/bg-2.jpg);
   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
}

＆＃13;

我也发现了这个，但它（上图）仅用于背景，我是否必须在2个容器中分隔导航栏？

JSFIDDLE

这就是我到目前为止所得到的。任何帮助表示赞赏。

Answer 1

你需要将ul设置为text-align：center;

find updated fiddle

.navbar2 ul{
text-align: center;
}

Answer 2

谢谢你locateganesh它工作，由于某种原因，我现在得到了更新的jsfiddle上看到的按钮之间的一些占位符。这怎么发生的？我没有改变任何东西只有文字algin中心。

编辑：我得到它删除图像之间的空格。

.yourclass {
    font-size: 0;
}

Answer 3

在css3中，您可以将多个图像用于背景图像。所有背景 - ？规则可以与相同的构造一起使用。

<html>
<head>
<title>Image Demo</title>
<style>
body{
    text-align: center;
}
#nav{
    background-image: url("images/battery1.jpg"), url("images/battery2.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right top;
    width: 100%;
    height: 200px;
}
</style>
</head>

<body>
<div id="nav">some text</div>
</body>
</html>

尝试一下，但你需要自己的电池照片。

导航栏两侧重复图像

3 个答案: