在 CSS 中設定背景影象

1. 在 CSS 中使用 background:url() 設定背景影象
2. 在 CSS 中使用相對路徑 /image/picture 設定背景影象
3. 在 CSS 中使用相對路徑 ../image/picture 設定背景

本文介紹了在 CSS 中設定背景圖片的方法。我們將討論如何設定影象的路徑，以便正確顯示背景影象。此外，我們將討論不同的相對路徑。

在 CSS 中使用 background:url() 設定背景影象

我們可以使用 background 屬性在 CSS 中設定背景影象。URL() 函式將儲存影象的檔案路徑作為背景影象。background 屬性是與背景相關的其他幾個屬性的簡寫。這些屬性按順序是 background-color, background-image, background-repeat, background-attachement 和 background-position。使用 background 屬性，我們可以在短時間內為所有這些屬性分配值。

我們可能出錯的關鍵點是在 URL() 函式中寫入影象的路徑。我們應該知道影象的位置，在 URL() 函式中寫入的路徑應該是相對於 CSS 檔案的。如果我們在 HTML 檔案本身中編寫 CSS，路徑應該是相對於 HTML 檔案的。

在下面的示例中，名為 picture 的影象位於 image 資料夾中。image 資料夾和以下 CSS 檔案 style.css 位於同一資料夾中。因此，以下程式碼將設定背景影象。

資料夾結構如下圖所示：

web
├── style.css
├── HTML
│ └── test.html
└── image
 └── picture

示例程式碼：

body {
    background: url(image/picture);
}

在 CSS 中使用相對路徑 /image/picture 設定背景影象

我們可以使用/image/picture 檔案路徑格式在 CSS 中設定背景影象。在這種格式中，影象位於 image 資料夾內。image 資料夾位於當前網站的根目錄。

在下面的示例中，我們將 picture 影象設定為背景影象。在這種格式中，CSS 檔案的位置無關緊要。我們不需要寫相對於 CSS 檔案的檔案路徑。檔案路徑是相對於當前網站的根目錄寫入的。這意味著 image 資料夾位於根目錄中。

示例程式碼：

body {
    background: url(/image/picture);
}

在 CSS 中使用相對路徑 ../image/picture 設定背景

我們可以使用 ../ 表示法返回到目錄結構中的一個級別。../ 符號可用於在 URL() 函式中寫入相對檔案路徑，同時在 CSS 中設定背景。

例如，我們在 html 資料夾中有一個 HTML 檔案 test.html。html 資料夾位於 web 資料夾內。影象 picture 位於 web 資料夾內的 image 資料夾內。在這樣的目錄結構中，我們可以使用下面的程式碼來設定背景。

資料夾結構如下圖所示：

web
├── CSS
├── HTML
│ └── test.html
└── image
 └── picture

在下面的示例中，我們在 HTML 檔案本身中編寫了 CSS。../ 符號將我們從 html 資料夾帶回到 web 資料夾。然後它找到 image 資料夾，然後在 image 資料夾中找到 picture 檔案。這樣，我們就可以使用相對路徑在 CSS 中設定背景圖片了。

示例程式碼：

body {
    background: url(../image/picture);
}