在 CSS 中設定背景影象

Sushant Poudel 2023年1月30日 2021年10月2日
  1. 在 CSS 中使用 background:url() 設定背景影象
  2. 在 CSS 中使用相對路徑 /image/picture 設定背景影象
  3. 在 CSS 中使用相對路徑 ../image/picture 設定背景
在 CSS 中設定背景影象

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

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

我們可以使用 background 屬性在 CSS 中設定背景影象。URL() 函式將儲存影象的檔案路徑作為背景影象。background 屬性是與背景相關的其他幾個屬性的簡寫。這些屬性按順序是 background-color, background-image, background-repeat, background-attachementbackground-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.htmlhtml 資料夾位於 web 資料夾內。影象 picture 位於 web 資料夾內的 image 資料夾內。在這樣的目錄結構中,我們可以使用下面的程式碼來設定背景。

資料夾結構如下圖所示:

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

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

示例程式碼:

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

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn

相關文章 - CSS Background