Question

我一直在尝试使用我正在处理的导航菜单来处理图像。但是，似乎无论我尝试什么，它都不会显示。

我尝试添加......

的变体

display:block;
background-position:top left;
clear:both;
list-style-image:url

...来自各种谷歌搜索。我是HTML / CSS的新手，所以我希望得到任何帮助或建议。作为参考，这里有一些我正在使用的HTML / CSS。

HTML

<div id="wrapper">
<div id="navigation">
<ul class="menu">
<li><a href="#">Forum</a></li>
<li><a href="#">Bookmarks</a></li>
<li><a href="#">Top 100</a></li>
<li><a href="#">Browse</a></li>
<li><a href="/">Home</a></li>
</ul>
</div>

CSS

#navigation .menu {
background-image:url ('images/gradient_nav.png');
border-top-style:solid;
border-top-color:#DDD;
border-bottom:2px solid #ddd;
border-top-width:2px;
height:50px;
margin-top:-5px;
clear:both;
}

我使用xampp在我的本地机器上工作，我的文件夹结构是：

htdocs\index.php
htdocs\css\style.css
htdocs\images\

提前致谢！

Answer 1

该url是对css文件的重新分配，而不是包含css的文件。你没有提供有关你的文件夹结构的信息，但也许是这样的：

index.html
images/gradient_nav.png
css/stylesheet.css

因此，网址为../images/gradient_nav.png - 导致此：

#navigation .menu {
  background-image:url ('../images/gradient_nav.png');
  border-top-style:solid;
  border-top-color:#DDD;
  border-bottom:2px solid #ddd;
  border-top-width:2px;
  height:50px;
  margin-top:-5px;
  clear:both;
}

无法获得背景图片：网址工作

1 个答案: