了解如何使用 CSS 的 url() 函數。

當我們談到背景圖片、@import 等等時,我們使用 url() 函數來載入資源:

div {
 background-image: url(test.png);
}

在這個例子中,我使用了相對 URL,它會在定義 CSS 檔案的資料夾中尋找該檔案。

我可以往前一層:

div {
 background-image: url(../test.png);
}

或進入一個資料夾:

div {
 background-image: url(subfolder/test.png);
}

或者,我可以從主機的根目錄開始載入文件:

div {
 background-image: url(/test.png);
}

或者,我可以使用絕對 URL 來載入外部資源:

div {
 background-image: url(https://mysite.com/test.png);
}