CSS url() 函數

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

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

1
2
3

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

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

我可以往前一層：

1
2
3

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

或進入一個資料夾：

1
2
3

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

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

1
2
3

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

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

1
2
3

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

tags: [“CSS”, “url()”, “資源載入”]