不顯示本地CSS背景圖像

Question

我試圖在CSS中顯示本地background-image。它位於index.html所在的文件夾中，並且不顯示。

.image { 
     width:100px; 
     background-image: url('PIC1.jpg'); 
    } 

任何幫助表示讚賞。

Answer 1

它沒有出現，因爲你沒有給任何高度到div看到這個http://jsfiddle.net/ce1j6k7k/2/可以刪除高處看差

HTML

<div id="image"></div> 

CSS

#image{ 
width:300px; 
height:300px; 
background-image:url('http://placekitten.com/300/301'); 
} 

Answer 2

CSS中指定的資源是相對於CSS文件的路徑而不是引用CSS文件的頁面解析的。 PIC1.jpg必須位於與CSS文件本身相同的目錄/文件夾中。

CSS沒有辦法做你認爲它的事情 - 這是件好事，因爲我想不出任何可能的用例。想象一下，這些頁面所有引用style.css：

/index.html 
/products/fish.html 
/user/account/orderHistory 

...如果style.css引用 「foo.jpg」 然後foo.jpg將不得不在/foo.jpg，/products/foo.jpg和/user/account/foo.jpg被複制。

Answer 3

我能想到3個可能的問題。 首先，圖像路徑。例如，如果這是你的形象真實路徑： d：\項目\ MyProject的\內容\圖片\ PIC1.jpg

，你應該在你的代碼做到這一點：

background-image: url('~\Content\Images\PIC1.jpg'); 

其次，是寬度您在代碼中設置的圖像與圖像的座標不匹配。在這種情況下，您可以更改代碼或重新調整圖像大小。

最後，圖像可能沒有加載到頁面上，並刷新它可能顯示幾次。