Question

我已经查看了有关stackoverflow的几个问题，但仍然没有找到答案......谷歌搜索的内容也没用......

这是我的CSS：

#nav {
    text-align:center;
    display: block;
    background-image: url(lines.png);
    background-repeat: repeat-x;
    font-family: Gabrielle;
    text-decoration: none;
}

最常见的问题是文件是否在正确的文件夹中 - 我向你保证。这个网站不在线，我到目前为止只使用本地文件。

以下是随附的HTML：

<div id="nav">
 <ul>
    <li><a href="kitchen.html">Kitchen &amp; Bath</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="interior.html">Interior Design</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="graphic.html">Graphic Design</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="cad.html">Auto CAD</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="modeling.html">3D Modeling</a></li>
</ul>

如果以某种方式有所帮助。

我试图制作＆＃34;重音线＆＃34;在我的导航的任何一侧，我不确定我是否正确地走了它。这是一个链接到该网站的灵感来源于＃34;我......你会看到他们导航的两边都有优雅的小线条。这些是我试图创造的。

http://www.tinkeringmonkey.com/

正如我所说，也许我以错误的方式去做。任何有关使现有代码有效的建议，或者提出改进方法的建议都将非常感激。

Answer 1

您必须指定nav的高度。同样最好指定行高，以便ul中的文本垂直居中。

#nav {
    text-align:center;
    display: block;
    background-image: url(lines.png);
    background-repeat: repeat-x;
    font-family: Gabrielle;
    text-decoration: none;
    height: 20px;
    line-height: 20px;
}

Answer 2

尝试为#nav添加高度和宽度，并为background-image引用：url（）

#nav {
text-align:center;
display: block;
background-image: url('./lines.png');
background-repeat: repeat-x;
font-family: Gabrielle;
text-decoration: none;
}

同时仔细检查文件名/类型和文件位置。如果在与html文件相同的文件夹中有一个名为“lines.png”的文件，则上述解决方案应该有效。

CSS导航重音背景图像不起作用

2 个答案: