Html 简明教程

HTML - Backgrounds

网页的背景是其内容背后的层，内容包括文本、图像、颜色和各种其他元素。

这是 Web 设计中必不可少的部分，可以改善网页的整体外观和用户体验。HTML 为处理文档中元素的背景提供了多个属性。

默认情况下，我们的网页背景为白色。我们可能不喜欢它，但不用担心。HTML 提供了以下两种很好的方式来装饰我们的网页背景。

  1. HTML Background with Colors

  2. HTML Background with Images

Syntax

<body background = value>

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

该值可以是颜色的英文名称、颜色的 RGB 值或颜色的十六进制值

Examples of HTML Background

以下是一些示例代码，显示了如何为 HTML 文档设置不同样式的背景。

Setting color for background

修改背景的一种基本方法是更改其颜色。 * background-color* 属性有利于为元素的背景指定颜色。可以通过在 HTML 元素的起始标记中合并以下样式属性来实现此目的。

<!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>

Setting Image as Background

HTML 允许我们将图片指定为 HTML 网页或表格的背景。 * background* 和 * background-image* 可用于控制 HTML 元素的背景图像，特别是页面正文和表格背景。在下一个示例中，我们只需将图像的路径作为值传递给这两个属性。在下例中，将 background-image 属性分配给网页的正文。

<!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>

Background Repeat and Position

尽管你仅使用 HTML 即可将图像设置为背景，但为了控制重复和定位等行为，我们需要使用 CSS。我们建议观看我们的 * CSS background-image* 以便更好地理解。CSS 提供了用于控制背景图像重复方式和定位方式的选项。background-repeat 属性指定图像是否应水平、垂直或同时重复，或不重复。此外，background-position 属性使开发人员能够确定应在元素中的何处放置背景图像。

下面的 HTML 程序创建了一个网页，其中有一个居中的内容 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>

Setting Patterned Backgrounds

你可能在许多网站上看到许多图案或透明背景。这可以通过在背景中使用图案图像或透明图像轻松实现。建议在创建模式或透明 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>