Question

我正在尝试使用背景图像制作菜单，但根据Web控制台，浏览器无法找到图像。我有这个问题很长一段时间，直到现在我不知道如何解决它。我认为解决方案非常简单，但我找不到它。

图像位于右侧地图中，因为如果我将图像加载到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>

Answer 1

尝试更改

background-image: url('img/menu1.jpg');

到

background-image: url('../img/menu1.jpg');

规则的路径是相对于css文件，而不是相对于html文件。

来自Quick Reminder About File Paths

你必须注意文件所在的关系   引用图像，以及图像实际位于何处。

以下是您需要了解的相关文件路径：


以＆＃34; /＆＃34开头;返回根目录并从那里开始

以＆＃34; ../"开头;向后移动一个目录并从那里开始

以＆＃34; ../../&# 34开头;向后移动两个目录并从那里开始（依此类推......）

Answer 2

CSS文件中图像的URL应该与THAT文件相关，而不是HTML文档

为什么css background-image不起作用？

2 个答案: