Question

基本上，我想制作一个导航栏，其中导航栏的当前或活动标签将具有圆形标签的背景图像。但是，这个图像似乎没有出现。我将图像放在下面的CSS代码的'#navbar .active a'部分：

<html>
<head>

<style type="text/css">
#menubar {
    width: 800px;
    height: 40px;
    background:url(../Images/menubar%20copy.jpg);
}
#navbarwrap {
    width: 580px;
    height: 40px;
    margin-left: 16px;
}
#navbar {
    width: 580px;
    height: 40px;
    margin-left: 16px;
}
ul  {
    float:left;
    width:100%;
    padding:0;
    margin:0;   
    list-style-type:none;
    white-space: nowrap;
}
li  {
    float:left;
    width: 94px;
    height: 40px;
    text-decoration:none;
    color:white;
    text-align: center;
    display:inline;
}
a   {
    color: #FFFFFF;
    text-decoration: none;
}
#navbar .active a{
    color: #000000;
    background: url(../Images/tab%20copy.gif) no-repeat;
}
</style>

</head>

    <body>
    <div id="menubar">
        <div id="navbarwrap">
        <div id="navbar">
            <ul>
            <li class="active"><a href="...">Link one</a></li>
            <li><a href="...">Link two</a></li>
            <li><a href="...">Link three</a></li>
            <li><a href="...">Link four</a></li>
            </ul>
        </div>
            </div>
    </div>

    </body>
    </html>

Answer 1

没有图片，您的代码就可以运行。所以它可能只是一个图像路径问题。

Answer 2

您检查过文件路径吗？

我读到那个的方式，你的文件在一个子目录中，是'Images'的兄弟

即

http://host/subdir/menu.html会将图片查找为http://host/Images/tab%20copy.gif

此外，您应该验证案件。大多数网络服务器都会区分Images和images

Answer 3

#menubar中的图片是否有效？如果没有，这可能只是一个路径错误。

您确定“图片”文件夹位于您正在处理的页面上方的一个文件夹中吗？看到代码的其余部分除了图像之外，我只能想象这是由不正确的路径引起的错误。

Answer 4

您首先必须检查图像文件夹，否则

这可能也有效

#navbar.active a{
   color: #000000;
   background: url(../Images/tab%20copy.gif) no-repeat;
  }

CSS背景导航栏的图像不会出现

4 个答案: