在 CSS 中新增背景影象

Subodh Poudel 2023年1月30日 2021年10月30日
  1. 在 CSS 中當影象和 CSS 檔案在同一資料夾時,新增背景影象
  2. 當影象、HTML 和 CSS 檔案位於不同資料夾時,在 CSS 影象中新增背景
在 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 Poudel avatar Subodh Poudel avatar

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

相關文章 - CSS Background