在 CSS 中新增背景影象
本教程介紹瞭如何在 CSS 中新增背景圖片。它還將解釋在新增背景影象時有哪些常見的錯誤。
在 CSS 中當影象和 CSS 檔案在同一資料夾時，新增背景影象
我們可以使用 background-image 屬性在 CSS 中設定背景影象。然後對於值，我們可以使用 url() 函式，其中影象名稱或影象路徑是引數。必須在 CSS 中選擇 body 標籤後編寫該屬性。這將啟用網頁整個正文中的背景影象。我們應該根據 HTML，CSS 和影象檔案的資料夾結構編寫影象名稱和路徑。我們將針對 HTML 和 CSS 檔案解釋不同影象位置的一些場景。
如果影象和 CSS 檔案位於同一目錄中，我們可以簡單地在 url() 函式中寫入影象名稱。例如，我們在目錄中有影象 bird.jpg。我們在同一目錄中有一個 CSS 檔案 style.css；以下程式碼將設定背景影象。
示例程式碼：
body{
background-image:url(bird.jpg);
}
此外，我們必須確保 HTML 和 CSS 檔案的相對檔案路徑應該是正確的。如果 CSS 是在 HTML 內部編寫的，則影象和 HTML 檔案應位於同一目錄中。如果它們不在同一目錄中，則 CSS 檔案在 HTML 檔案中的相對路徑應該是正確的。
當影象、HTML 和 CSS 檔案位於不同資料夾時，在 CSS 影象中新增背景
假設我們有一個名為 index.html 的 HTML 資料夾、一個名為 style.css 的 CSS 檔案和名為 bird.jpg 的影象。HTML 檔案位於 html 資料夾中，CSS 檔案位於 css 資料夾中，影象位於 image 資料夾中。在這樣的檔案結構中，我們應該知道我們應該如何給出 CSS 檔案和影象的相對路徑，以便顯示背景影象。首先，我們應該確保 HTML 和 CSS 檔案是連結的。以下程式碼將 HTML 和 CSS 檔案與上述資料夾結構連結起來。
示例程式碼：
<head>
<link rel="stylesheet" href="../css/styles.css">
</head>
body{
background-image : url('../image/bird.jpg');
}
../ 符號表示從當前資料夾後退一步。當我們從 index.html 所在的 html 資料夾後退一步時，我們將到達 css 資料夾所在的父資料夾。然後，我們可以在 css 資料夾中找到 style.css 檔案。現在，我們必須以同樣的方式在 CSS 檔案中提供 bird.jpg 的相對路徑。
由於 image 資料夾位於當前 CSS 檔案的後退一步，../ 會將我們帶回父資料夾。然後，它獲取 bird.jpg 所在的 image 資料夾。因此，我們可以毫無錯誤地在 CSS 中設定背景影象。
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn