Html 简明教程

HTML - Backgrounds

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

The background of a webpage is a layer behind its content, which includes text, images, colors and various other elements.

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

It is an essential part of web design, that improves the overall look of a web page as well as user experience. HTML offers multiple attributes and properties for manipulating the background of elements within a document.

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

By default, our webpage background is white in color. We may not like it, but no worries. HTML provides the following two good ways to decorate our webpage background.

  1. HTML Background with Colors

  2. HTML Background with Images

Syntax

<body background = value>

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

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

The value can be English name of color, RGB value of color or hexadecimal value of color

Examples of HTML Background

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

Following are some example code that shows how to set different styles of background for a HTML document.

Setting color for background

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

An elementary method to modify the background is by altering its color. The background-color property facilitates the specification of a color for an element’s background. This can be accomplished by incorporating the following style attribute within the opening tag of an HTML element.

<!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 属性分配给网页的正文。

HTML allows us to specify an image as the background of our HTML web page or table. The background and background-image can be used to control the background image of an HTML element, specifically page body and table backgrounds. We simply need to pass the path of an image as a value to both properties as illustrated in the next example. In the below example, the background-image property is assigned to the body of web page.

<!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 属性使开发人员能够确定应在元素中的何处放置背景图像。

Although you can set image as background using just HTML, inorder to control it’s behavior like repeating and positioning we need to use CSS. We recommend watching our CSS background-image for better understanding. CSS offers options for controlling how background images repeat and their positioning. The background-repeat property specifies whether the image should repeat horizontally, vertically, both, or neither. Furthermore, the background-position property empowers developers to determine where the background image should be positioned within the element.

下面的 HTML 程序创建了一个网页，其中有一个居中的内容 div，其中包含来自指定图像的重复垂直背景图案。容器的背景色默认为白色，容器中的文本采用黑色样式，从而创建视觉上吸引人的、有凝聚力的设计。

The below HTML program creates a webpage with a centered content div having a repeating vertical background pattern from the specified image. The background color of the container is set to white by default, and the text within the container is styled with a black color, creating a visually appealing and cohesive design.

<!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，以避免加载缓慢。

You might have seen many pattern or transparent backgrounds on various websites. This simply can be achieved by using patterned image or transparent image in the background. It is suggested that while creating patterns or transparent GIF or PNG images, use the smallest dimensions possible even as small as 1x1 to avoid slow loading.

这里有一些示例来设置表格的背景图案。

Here is an examples to set background pattern of a table.

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