在 CSS 中設定背景影象
-
在 CSS 中使用
background:url()
設定背景影象 -
在 CSS 中使用相對路徑
/image/picture
設定背景影象 -
在 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);
}
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