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>

打印页面