背景圖片不會顯示

Question

我有一個背景圖片，我想重復該圖片（repeat-x），但是當我嘗試查看該頁面時，沒有任何顯示。 我還使用javascript在一天中的不同時間使用不同的CSS文件，但是我確信這不是問題，因為Firebug表明CSS文件已添加到頭部。

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

您可以在此處下載該站點的存檔： http://cdn.duffcraft.net.adam543i.net/sitebkp-1845.zip : http://cdn.duffcraft.net.adam543i.net/sitebkp-1845.zip它只有200 kb。 沒什么大不了的。

Answer 1

由於標題中沒有文本，因此div將不會顯示。請嘗試按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;
}

Answer 2

並且您確定圖像文件的路徑正確嗎？ 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>到rel=stylesheet的<link>元素中。 這樣，瀏覽器就不會知道這是一個樣式表。

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

祝您好運解決這些問題！

Answer 3

如果您使用的是Chrome瀏覽器，請檢查應顯示背景圖片的元素。

將鼠標懸停在螢火蟲窗口中的背景圖像聲明上

background-image:url(img/night/night-time-tile.png);

您將看到圖像的完整路徑。

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

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

Answer 4

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

這意味着該元素沒有可見的像素可以看到整個圖像。