HTML - 背景

網頁背景是內容層面的後面一層，內容包括文字、影像、顏色以及其他各種元素。

它是網頁設計中不可或缺的一部分，可以提升網頁整體外觀和使用者體驗。HTML 提供多種屬性和特性，用於操作文件中元素的背景。

預設情況下，我們的網頁背景顏色為白色。我們可能不喜歡它，但不用擔心。HTML 提供以下兩種很好的方法來裝飾我們的網頁背景：

使用顏色作為 HTML 背景
使用圖片作為 HTML 背景

語法

以下是 HTML 背景的語法

<body background = value>

<body style="background-color: value;">

值可以是英文顏色名稱、RGB 顏色值或十六進位制顏色值。

HTML 背景示例

以下是一些示例程式碼，演示如何為 HTML 文件設定不同的背景樣式。

設定背景顏色
設定背景圖片
背景重複和位置
設定圖案背景

設定背景顏色

修改背景的一種基本方法是更改其顏色。background-color 屬性可以指定元素背景的顏色。這可以透過在 HTML 元素的開始標籤中包含以下樣式屬性來實現。

示例

以下是為 DIV 設定背景顏色的示例

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Styled Div Example</title>
</head>

<body>
   <div style="background-color: #3498db; ">
      <h1>Welcome to My Website</h1>
      <p>
         This is an example of a styled div with a 
         background color and text color.
      </p>
      <!-- Additional content goes here -->
   </div>
</body>

</html>

設定背景圖片

HTML 允許我們指定影像作為 HTML 網頁或表格的背景。background 和 background-image 可用於控制 HTML 元素的背景影像，特別是頁面主體和表格背景。我們只需要將影像路徑作為值傳遞給這兩個屬性，如下例所示。在下面的示例中，background-image 屬性被分配給網頁的主體。

示例

以下是如何設定影像作為背景顏色的示例；這裡我們將影像設定為網頁的背景，使用 <body> 標籤

<!DOCTYPE html>
<html lang="en">

<head>
      <title>Background Image Example</title>
</head>

<body background="/market/public/assets/newDesign/img/logo.svg">
   <div style="background-color: rgba(255, 255, 255, 0.8); padding: 20px;">
      <h1>Welcome to My Website</h1>
      <p>
         This is an example of setting a background 
         image using HTML attributes.
      </p>
   </div>
</body>

</html>

背景重複和位置

雖然您可以僅使用 HTML 設定影像作為背景，但為了控制其行為，例如重複和定位，我們需要使用 CSS。我們建議觀看我們的 CSS background-image 以更好地理解。CSS 提供了控制背景影像重複方式及其定位的選項。background-repeat 屬性指定影像是否應水平重複、垂直重複、同時重複或都不重複。此外，background-position 屬性使開發人員能夠確定背景影像應在元素中定位的位置。

示例

下面的 HTML 程式建立一個網頁，其中包含一個居中的內容 div，該 div 從指定的影像中具有垂直重複的背景圖案。容器的背景顏色預設為白色，容器內的文字樣式為黑色，從而建立了一個視覺上吸引人且一致的設計。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Background Repeat</title>
   <style>
      body {
         background-image: 
            url('/market/public/assets/newDesign/img/logo.svg');
         background-repeat: repeat-y;
         background-position: center;
         justify-content: center;
         align-items: center;
         display: flex;
      }
      div{
         background-color: rgba(255, 255, 255, 0.6); 
         padding: 20px;
      }
   </style>
</head>

<body>
   <div>
      <h1>Welcome to My Website</h1>
      <p>
         This is an example of setting a background 
         image using HTML attributes.
      </p>
   </div>
</body>

</html>

設定圖案背景

您可能在許多網站上看到過許多圖案或透明背景。這可以透過在背景中使用圖案影像或透明影像來輕鬆實現。建議在建立圖案或透明 GIF 或 PNG 影像時，使用盡可能小的尺寸，甚至小到 1x1，以避免載入緩慢。

示例

以下是如何設定表格背景圖案的示例。

<!DOCTYPE html>
<html>

<head>
   <title>HTML Background Images</title>
</head>

<body>

<!-- Set a table background using pattern -->
<table background = "/images/pattern1.gif" 
         width = "100%" 
         height = "100">
   <tr>
      <td>
         This background is filled up with a pattern image.
      </td>
   </tr>
</table>

<!-- Another example on table background using pattern -->
<table background = "/images/pattern2.gif" 
         width = "100%" 
         height = "100">
   <tr>
      <td>
         This background is filled up with a pattern image.
      </td>
   </tr>
</table>

</body>
   
</html>

列印頁面