為什么CSS背景圖片不起作用？
[英]Why does css background-image not work?
問題描述
我正在嘗試制作帶有背景圖像的菜單，但是根據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>
2 個解決方案
解決方案1
3 已采納 2014-12-27 15:52:55
嘗試改變你的
background-image: url('img/menu1.jpg');
至
background-image: url('../img/menu1.jpg');
規則的路徑是相對於CSS文件的，而不是相對於HTML文件的。
您必須注意文件引用圖像的位置與該圖像實際位置的關系。
這是您需要了解的有關相對文件路徑的所有信息：
- 以“ /”開頭返回到根目錄並從那里開始
- 以“ ../”開頭的目錄向后移動並從該目錄開始
- 以“ ../../”開始向后移動兩個目錄，然后從那里開始（依此類推...）
解決方案2
0 2014-12-27 15:52:59
CSS文件中圖像的URL應該相對於THAT文件，而不是HTML文檔。
為什么背景圖像在外部 CSS 中不起作用，但在內部卻起作用？
[英]Why the background-image doesn't work in a external CSS but in a internal it does?
為什么將帶有線性漸變和圖像的 css background-image 放在 html 樣式標簽中而不是放在樣式表中時？
[英]Why does putting css background-image with linear-gradient and image work in the html style tag but not when put in the stylesheet?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.