CSS 导航强调背景图像不起作用

Question

我已经浏览了堆栈溢出上的几个问题，但仍然没有找到答案......谷歌搜索也没用....

这是我的 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>

万一这以某种方式有所帮助。

我

正在尝试在导航的两侧制作"重音线"，但我不确定我是否以正确的方式进行。这是指向"启发"我的网站的链接......你会看到在他们导航的两侧都有优雅的小线条。这些就是我想要创造的。

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 中添加高度和宽度，并在背景图像中添加引号：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"的文件，则上述解决方案应该有效。