我正在尝试制作一个带有背景图像的菜单，但根据 Web 控制台，浏览器无法找到该图像。我有这个问题很长时间了，直到现在我都不知道如何解决。我认为解决方案非常简单，但我没有找到。
图像在正确的 map 中，因为如果我在 img 标签中加载图像，浏览器会显示图像。
我在本地主机上运行它并使用 Firefox
请参阅下面的代码。
有人可以帮助解决这个问题吗？
body{
margin: 0px;
}
nav{
position: fixed;
top:0px;
width:100%;
height:50px;
background-image: url('img/menu1.jpg');
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/svg.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<nav >
<ul class="banner">
<li>Test menu</li>
</ul>
<ul class="menu">
</ul>
</nav>
</body>
</html>最佳答案
试着改变你的
background-image: url('img/menu1.jpg');
到
background-image: url('../img/menu1.jpg');
规则的路径是相对于 css 文件的，而不是相对于 html 文件的。
引自 Quick Reminder About File Paths
You have to pay attention to the relationship of where the file is that is referencing the image, and where that image actually is.
Here is all you need to know about relative file paths:
- Starting with "/" returns to the root directory and starts there
- Starting with "../" moves one directory backwards and starts there
- Starting with "../../" moves two directories backwards and starts there (and so on...)
关于html - 为什么 css 背景图像不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27668780/