CSS 檔案中的相對路徑是否相對於 CSS 檔案？

使用 CSS 時，引用圖片等外部文件CSS 檔案是常見的做法。了解這些引用的相對路徑對於正確的文件位置至關重要。

CSS 中的相對路徑：仔細查看

CSS 檔案中的相對路徑是相對於CSS 檔案本身，而不是使用 CSS 檔案的 HTML 檔案。這表示在為映像或其他檔案指定路徑時，需要提供從CSS檔案所在目錄開始的路徑。

用範例理解

為了示範這個概念，請考慮以下佈局：

• 頁：page.htm（位置：不事）
• CSS：/resources/css /styles.css
• 圖片：/resources/images/image.jpg

CSS檔案中（styles.css） css):

div {
  background-image: url('../images/image.jpg');
}

在此範例中，CSS 檔案中映像 (image.jpg) 的路徑以 ../ 開頭。這意味著從 CSS 檔案 (styles.css) 的位置“上一個目錄”，然後導航到儲存圖像的圖像目錄。