CSS圖片路徑問題總結

所以針對Css中圖片路徑問題總結如下：

 

1、不要給背景圖片路徑加引號
將background:url("xxx.gif")改為background:url(xxx.gif)
因為對於部分瀏覽器加引號反而會引起錯誤。

 

2、背景圖片的路徑是相對與當前css頁面的路徑。

例如：
有如下目錄結構
|--images
   |--xxx.gif
|--css
   |--xx.css
|--index.html
代碼內容
index.html引用xx.css檔案。<link rel="stylesheet" href="css/xx.css" />
xx.css要引用xxx.gif圖片其寫法為：background:url(../images/xxx.gif)

 

3、我們通常用link的方法直接引用一個CSS檔案到HTML（或其它使用中文件）檔案中。我們會發現有時候我們的圖片無法顯示了。此時，請查看你的CSS代碼，是不是重複設定有問題，是不是圖片的定位有問題。如果這些都沒有問題請去掉background的重複與定位屬性，還原成預設性。如果圖片還是沒有出現，那隻能是我們今天所說的路徑問題了！在一般情況下，我們習慣於這樣設定圖片路徑：

Example Source Code：

background-image:url(logo.jpg);
background-image:url(../logo.jpg);
background-image:url(../images/logo.jpg);

　　對於第一種情況“url(logo.jpg)”。我們要看此圖片是不是與CSS檔案在同一目錄。對於第二與第三種情況，我們是極力不推薦使用的，因為我們的網頁檔案可能存在於多級目錄中，不同級目錄的檔案位置註定了我們的相對路徑是不一樣的。而這樣就讓問題複雜化了，很可能圖片在這個檔案中顯示正常，換了一級目標，圖片就找不到影子了。

　　有一種方法可以輕鬆解決這一問題，我們可能建立一個公用檔案目錄，用來存放一些公用的圖片檔案，JS指令碼，CSS檔案，例如“common”，我們將CSS檔案直接置於該目錄中，也可以將圖片檔案也直接存於該目錄中，如果圖片檔案較多在其內部建立一個目錄存放圖片檔案“common/images”。我們在CSS檔案中直接寫：url(logo.jpg)或url(images/logo.jpg)就可以搞定上面的問題了。