背景圖像不會顯示

我有一個背景圖像，我想重複（repeat-x），但是當我嘗試查看該頁面時，沒有任何顯示。我也使用JavaScript來爲一天中的不同時間使用不同的CSS文件，但我相信這不是問題，因爲螢火蟲顯示CSS文件已添加到頭部。背景圖像不會顯示

編輯：問題是瀏覽器無法找到該文件，但是當我嘗試鏈接到它時，它仍然無法找到該文件。

您可以在這裏下載網站的檔案： http://cdn.duffcraft.net.adam543i.net/sitebkp-1845.zip 它只有200左右kb。沒什麼大的。

2011-11-08 Mythrillic

不知道在資源檢查方面所做的螢火，但在Chrome中，你可以看到，如果URL路徑（在資源選項卡）指向一個有效的文件。也許瀏覽器找不到你的背景圖片？ – musefan

而且您確定圖像文件的路徑是正確的？ Firebug會加載圖像嗎？

你的文件結構大概就是這個樣子

index.html 
css/ 
    style.css 
img/ 
    night/ 
     night-tile.png

現在，從您的style.css你必須使用相對路徑的圖像文件。所以不是img/night/night-tile.png而是../img/night/night-tile.png。在你的路徑中，它正在尋找css目錄中的圖像，這是錯誤的。

== ==更新

下載你的代碼後，我發現2個錯誤。

首先是您忘記將rel=stylesheet添加到您鏈接到樣式表的<link>元素。這樣，瀏覽器就不會知道它是樣式表。

第二個問題是，您忘記在night.css的第一條規則末尾添加;，導致導致背景規則無法呈現的解析錯誤。

祝你好運解決這些問題！

來源

2011-11-08 09:29:53 vindia

我試過但它找不到文件。 – Mythrillic

我想你可以在你的機器/服務器上查找路徑，不是嗎？ – vindia

我可以，但它似乎沒有工作。我會壓縮網站並給你鏈接。 – Mythrillic

元素沒有高度（顯式或內容）。

這意味着沒有可見像素的元素來查看圖像。

來源

2011-11-08 09:29:01 Quentin

，因爲在你的標題沒有內容的DIV不會得到displayed.Try以下CSS

#header { 
    background-image:url(img/night/night-time-tile.png); 
    background-repeat:repeat-x; 
    position:absolute; 
    height:100px; // Adjust height according to your image height 
    top:0; 
    left:0; 
}

來源

2011-11-08 09:30:15

如果Chrome瀏覽器，檢查其中的背景圖像應出現的元素。

將鼠標懸停在Firebug窗口

，你會看到圖像的完整路徑背景圖像聲明。

在屏幕截圖中，您可以在頁面頂部看到相應的stackoverflow徽標。

然後，您可以單擊css聲明並更改url，直到找到圖像的正確路徑。

enter image description here

來源

2011-11-08 10:16:29

這幫了我很多。我結束了不得不改變文件名，然後它的工作。我不知道爲什麼，但它現在起作用。 ;） – Mythrillic

@ Adam543i - 很高興幫助。 –

背景圖像不會顯示

回答

相關問題