Question

我一直在为tafe做一个网站，我已经采取了不同的方式来做到这一点，到目前为止他们都没有工作。我试图使用div id将按钮图像添加到列表菜单，但它似乎没有工作。 This demo page是我的网页的在线版本，图片菜单假设位于左侧，文字位于其上方。

我正在尝试将图像放在无序列表中作为背景图像，但它似乎不起作用。我试图把它放在css的这一部分中。

#navcontainer ul {
    padding: 0px;
    margin-left: 0px;
    list-style-type: none;
    width: 200px;
    display: block;
    line-height: 34px;
    background-image: url(images/pg_menu_bg.png);
}

这是我的html和我的CSS：

<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"><ul><li><a href="JavaScript:void(0);">HOME</a></li><li><a href="JavaScript:void(0);">NEWS</a></li>
<li>
<a href="JavaScript:void(0);">CONTACT</a></li><li><a href="JavaScript:void(0);">ABOUT</a></li></ul></div>
<div id="leftcolumn">
  <div id="navcontainer">
  <ul>
    <li><a href="JavaScript:void(0);">Upcoming Events</a></li>
    <li><a href="JavaScript:void(0);">Members</a></li>
    <li><a href="JavaScript:void(0);">Specials</a></li>
    <li><a href="JavaScript:void(0);">Who is Snap Nature</a></li>
    </ul>
  </div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>

CSS：

@charset "utf-8";
* {
    background-color: #6FF;
    margin: 0px;
    padding: 0px;
}
#wrapper {
    background-color: #F90;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#header {
    background-color: #6F0;
    height: 124px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#navigation {
    background-color: #F3F;
    float: left;
    height: 25px;
    width: 960px;
}
#leftcolumn {
    background-color: #009;
    float: left;
    height: 350px;
    width: 250px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#content {
    background-color: #69F;
    width: 710px;
    float: left;
    height: 350px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#footer {
    background-color: #F00;
    clear: both;
    height: 25px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#navigation ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 960px;
    height: 0px;
}
#navigation li {
    float: left;
    background-color: #F3F;
}
#navigation a {
    line-height: 25px;
    text-decoration: none;
    color: #000;
    background-color: #F3F;
    display: block;
    text-align: center;
    vertical-align: middle;
    width: auto;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 25px;
}

#navigation a:hover {
    color: #999;
    text-decoration: none;
}

#navcontainer ul {
    padding: 0px;
    margin-left: 0px;
    list-style-type: none;
    width: 200px;
    display: block;
    line-height: 34px;
    background-image: url(images/pg_menu_bg.png);
}

请帮助TY 贾里德

Answer 1

修改

是的，这正是问题所在。我刚检查了您发布的链接，浏览器正在查找位于http://www.156.onl.checit.info/CSS/images/pg_menu_bg.png的图片 - 该图片不存在。

看到那里的“CSS”？我99％肯定这是无意的。这是绝对/相对路径问题。请继续阅读...

如果你的图像没有出现，我会出去预感并说这是因为你的图像路径搞砸了。

<强>解决方案：

此：

/* ABSOLUTE PATH solution */ background-image: url(/images/pg_menu_bg.png);

或者甚至可能（取决于您的文件结构）：

/* RELATIVE PATH solution. This is FROM YOUR CSS FILE.*/ background-image: url(../images/pg_menu_bg.png);

<强>解释

之间存在很大差异：

background-image: url(images/pg_menu_bg.png);

和

background-image: url(/images/pg_menu_bg.png); /* note the leading slash */

前导斜杠表示绝对路径（即“来自根域url的路径”），而没有前导斜杠表示相对路径（即“相对路径”）到这个文件的位置，在这种情况下，你的CSS文件“）。

这意味着，假设您有这样的文件结构：

root | ----images | pg_menu_bg.png | ----css | mycss.css

从您的css文件中调用：

background-image: url(images/pg_menu_bg.png);

实际上导致：

http://yourdomain.com/css/images/pg_menu_bg.png /* note the "css" */

而呼叫：

background-image: url(/images/pg_menu_bg.png);

结果：

http://yourdomain.com/images/pg_menu_bg.png

所以我认为您需要查看目录结构，并从那里开始工作。我的猜测是你需要使用绝对路径。

但是如果您想将 relative paths 与上面的虚拟文件结构一起使用，您可以使用：

background-image: url(../images/pg_menu_bg.png); /* ".." means "parent directory"

更多信息：Using relative URL in CSS file, what location is it relative to?

第二个问题：

你有另一个问题，这种风格：

* { background-color: #6FF; margin: 0px; padding: 0px; }

此样式将蓝色背景应用于每个元素。因此，即使您的背景图像的路径正常，它们也会被具有蓝色背景的前景元素隐藏。

尝试将*更改为body：

body { background-color: #6FF; margin: 0px; padding: 0px; }

注意：如果您确实想要在每个元素上使用margin:0;和padding:0;，请保留上面的样式（但删除background-color），并定义一个新的body样式，并将background-color放在那里。像这样：

* { margin: 0px; padding: 0px; } body { background-color: #6FF; }

使用css将背景图像添加到列表菜单

1 个答案: