HTML - 背景

原创

admin 4个月前 (08-07) 阅读数 95 #HTML

HTML - 背景

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

它是网页设计的重要组成部分，可以改善网页的整体外观和用户体验。HTML提供了多种属性和属性来操作文档中元素的背景。

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

使用颜色的HTML背景
使用图像的HTML背景

语法

以下是HTML背景的语法：

<body background = 值>

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

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

HTML背景示例

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

设置背景颜色
设置图像作为背景
背景重复和位置
设置图案背景

设置背景颜色

修改背景的基本方法是改变其颜色。background-color属性允许为元素的背景指定颜色。这可以通过在HTML元素的开始标签中包含以下样式属性来实现。

示例

以下是为DIV设置背景颜色的示例：

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

<head>
   <title>样式化DIV示例</title>
</head>

<body>
   <div style="background-color: #3498db;">
      <h1>欢迎访问我的网站</h1>
      <p>
         这是一个带有背景颜色和文本颜色的样式化div示例。
      </p>
      <!-- 其他内容放在这里 -->
   </div>
</body>

</html>

设置图像作为背景

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

示例

以下是将图像设置为背景颜色的示例；这里我们使用<body>标签将图像设置为网页的背景：

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

<head>
      <title>背景图像示例</title>
</head>

<body background="/market/public/assets/newDesign/img/logo.svg">
   <div style="background-color: rgba(255, 255, 255, 0.8); padding: 20px;">
      <h1>欢迎访问我的网站</h1>
      <p>
         这是一个使用HTML属性设置背景图像的示例。
      </p>
   </div>
</body>

</html>

背景重复和位置

虽然您可以使用HTML仅设置图像作为背景，但为了控制其行为，如重复和定位，我们需要使用CSS。我们建议观看我们的CSS background-image以获得更好的理解。CSS提供了控制背景图像如何重复及其定位的选项。background-repeat属性指定图像是否水平、垂直、两者都重复或不重复。此外，background-position属性使开发人员能够确定背景图像应该在元素内的什么位置。

示例

下面的HTML程序创建了一个网页，其中包含一个居中的内容div，具有从指定图像重复的垂直背景图案。容器的背景颜色默认设置为白色，容器内的文本样式为黑色，创建了一个视觉上吸引人且协调的设计。

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

<head>
   <title>HTML背景重复</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>欢迎访问我的网站</h1>
      <p>
         这是一个使用HTML属性设置背景图像的示例。
      </p>
   </div>
</body>

</html>

设置图案背景

您可能在各种网站上看到许多图案或透明背景。这可以通过在背景中使用图案图像或透明图像来实现。建议在创建图案或透明的GIF或PNG图像时，使用尽可能小的尺寸，甚至小到1x1，以避免加载缓慢。

示例

以下是如何设置表格背景图案的示例。

<!DOCTYPE html>
<html>

<head>
   <title>HTML背景图像</title>
</head>

<body>

<!-- 使用图案设置表格背景 -->
<table background="/images/pattern1.gif" 
         width="100%" 
         height="100">
   <tr>
      <td>
         这个背景填充了图案图像。
      </td>
   </tr>
</table>

<!-- 另一个使用图案设置表格背景的示例 -->
<table background="/images/pattern2.gif" 
         width="100%" 
         height="100">
   <tr>
      <td>
         这个背景填充了图案图像。
      </td>
   </tr>
</table>

</body>
   
</html>