css程式碼與引用圖片的相對路徑

admin發表於2017-02-02
原文網址 : https://www.softwhy.com/article-387-1.html
CSS

大家知道通過css程式碼可以引入圖片等資源，這裡就涉及到一個路徑問題，下面就做一下簡單介紹。

一.css程式碼直接在當前頁面:

使用內部樣式表和內聯樣式就是css程式碼和當前頁面在一起的，那麼引用圖片路徑的時候，其實就是相對於當前css程式碼位置的相對路徑，比如有以下文件結構:

a:3:{s:3:\"pic\";s:43:\"portal/201702/02/172052fbrbggibznorub6r.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果我們想在index.html頁面中使用image資料夾下的圖片可以使用如下程式碼:

[CSS] 純文字檢視 複製程式碼
div{
  width:100px;
  height:100px;
  background:url(images/small.jpg);
}

上面的圖片路徑就是相對於當前css程式碼所在頁面的路徑。

二.引入外部樣式表:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" /> 
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<title>螞蟻部落</title>  
</head>  
<body>  
<div></div>  
</body>  
</html>

以上程式碼是引入的外部樣式表，那麼給div設定背景圖片的時候，應該如何使用路徑，很多朋友可能既然css程式碼已經引入當前頁面了，那麼圖片的路徑也是相對於當前頁面的路徑，那麼style.css中的程式碼如下:

[CSS] 純文字檢視 複製程式碼
div{ 
  width:100px; 
  height:100px; 
  background:url(images/small.jpg); 
}

以上程式碼是錯誤的，其實正確的相對路徑應該是相對於css檔案的，程式碼如下:

[CSS] 純文字檢視 複製程式碼
div{
  width:100px;
  height:100px;
  background:url(../images/small.jpg);
}

從以上兩種情況可以看出，資源的路徑是相對於css程式碼所在的位置的。

相關文章