为什么css背景图片不起作用？

问题描述：

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

图像位于正确的贴图上，因为如果我在img标签中加载图像，浏览器会显示图像。
我运行它本地主机，我用火狐

看到我的代码如下。

有人可以帮助解决这个问题吗？

body{ 
 
\t margin: 0px; 
 
} 
 
nav{ 
 
\t position: fixed; 
 
\t top:0px; 
 
\t width:100%; 
 
\t height:50px; 
 
\t background-image: url('img/menu1.jpg'); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <script src="js/svg.js"></script> 
 
\t <link rel="stylesheet" type="text/css" href="css/index.css"/> 
 
</head> 
 
<body> 
 
\t <nav > 
 
\t \t <ul class="banner"> 
 
\t \t \t <li>Test menu</li> 
 
\t \t </ul> 
 
\t \t <ul class="menu"> 
 
\t \t </ul> 
 

 
\t </nav> 
 
</body> 
 
</html>

可能是background-image：url（'../ img/menu1.jpg'）;将解决 – InferOn 2014-12-27 15:45:08

图像的名称是什么？它在正确的文件夹？如果您在浏览器地址栏中输入图像的网址，它是否加载？ – Douglas 2014-12-27 15:45:15

我编辑了这个问题。 – Vinc199789 2014-12-27 15:49:17

答

试图改变自己的

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

到

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

您的规则的路径是相对于css文件，而不是相对于HTML文件。从Quick Reminder About File Paths

报价你必须要注意该文件是被引用的图像的关系，以及该图像实际上是。

这里是所有你需要了解的相关文件路径：

以“/”返回到根目录开始，开始有

与“../”移动一个目录向后启动和从那里开始

用“../../”开始向后移动两个目录，并开始在那里（等等...）

非常感谢，为我工作。但我觉得很奇怪，因为一开始没有必要那样做。 – Vinc199789 2014-12-27 15:55:30

谢谢关于文件路径的提示帮助了我很多。 – Vinc199789 2014-12-27 16:01:03

答

的IMAG的网址e在你的CSS文件中应该是相对于THAT文件而不是你的HTML文档

为什么css背景图片不起作用？

相关推荐