爲什麼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>

來源

2014-12-27 Vinc199789

可能是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

報價你必須要注意該文件是被引用的圖像的關係，以及該圖像實際上是。

這裏是所有你需要了解的相關文件路徑：

以「/」返回到根目錄開始，開始有

與「../」移動一個目錄向後啓動和從那裏開始

用「../../」開始向後移動兩個目錄，並開始在那裏（等等...）

來源

2014-12-27 15:52:55 InferOn

非常感謝，爲我工作。但我覺得很奇怪，因爲一開始沒有必要那樣做。 – Vinc199789 2014-12-27 15:55:30

謝謝關於文件路徑的提示幫助了我很多。 – Vinc199789 2014-12-27 16:01:03

的IMAG的網址e在你的CSS文件中應該是相對於THAT文件而不是你的HTML文檔

來源

2014-12-27 15:52:59 Eeji

爲什麼css背景圖片不起作用？

回答

相關問題