默认情况下，您的网页背景为白色。您可能不喜欢它，但不用担心。 HTML 为您提供了以下两种设置网页背景的好方法。

  • 带颜色的 HTML 背景
  • 带图像的 HTML 背景

现在让我们使用适当的示例一一了解这两种方法。

带颜色的 Html 背景

bgcolor 属性用于控制 HTML 元素的背景，特别是页面正文和表格背景。

注意 - HTML5 中已弃用 bgcolor 属性。不要使用此属性。

以下是将 bgcolor 属性与任何 HTML 标记一起使用的语法。

<tagname bgcolor = "颜色值"...>

    颜色值 可以采用以下任何格式给出 -

    <!-- 使用颜色名 -->
<table bgcolor = "lime" >
<!-- 使用十六进制 -->
<table bgcolor = "#f1f1f1" >
<!-- 使用rgb格式 -->
<table bgcolor = "rgb(0,0,120)" >
    • 1
    • 2
    • 3
    • 4
    • 5

    示例

    以下是设置 HTML 标签背景的示例 -

    <!DOCTYPE html>
<html>

   <head>
      <title>HTML 背景色示例</title>
   </head>
	
   <body>
      <!-- 方法1使用颜色名 -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               设置背景色为黄色
            </td>
         </tr>
      </table>
 
      <!-- 方法2 使用十六进制 -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               设置背景色为蓝色
            </td>
         </tr>
      </table>
 
      <!-- 方法3 使用rgb -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               设置背景色为绿色
            </td>
         </tr>
      </table>
   </body>
   
</html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    测试一下

    带图像的 Html 背景

    background 属性也可用于控制 HTML 元素的背景，特别是页面正文和表格背景。您可以指定图像来设置 HTML 页面或表格的背景。

    注意 - HTML5 中已弃用 background 属性。不要使用此属性。

    以下是在任何 HTML 标记中使用background 属性的语法。

    注意 - background 属性已弃用，建议使用样式表进行背景设置。

    <tagname background = "Image URL"...>

      最常用的图像格式是 JPEG、GIF 和 PNG 图像。

      示例

      以下是设置表格背景图片的示例。

      <!DOCTYPE html>
<html>

   <head>
      <title>HTML 背景图片</title>
   </head>
	
   <body>
      <!-- 设置表格的背景 -->
      <table background = "/uploads/html/html.gif" width = "100%" height = "100">
         <tr><td>
            该背景充满了 HTML 图像。
         </td></tr>
      </table>
   </body>
   
</html>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16

      测试一下

      图像和透明背景

      您可能在各种网站上看到过许多图案或透明背景。这可以通过在背景中使用图案图像或透明图像来实现。

      建议在创建图案或透明 GIF 或 PNG 图像时，使用尽可能小的尺寸，甚至小至 1x1，以避免速度缓慢

      示例

      以下是设置表格背景图案的示例 -

      <!DOCTYPE html>
<html>

   <head>
      <title>HTML 背景图片</title>
   </head>
	
   <body>
      <!-- 使用图案设置表格背景 -->
      <table background = "/uploads/html/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               这个背景充满了图案图像。
            </td>
         </tr>
      </table>

      <!-- 使用图案的表格背景的另一个例子 -->
      <table background = "/uploads/html/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               这个背景充满了图案图像。
            </td>
         </tr>
      </table>
   </body>
   
</html>
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27

      测试一下