HTML - 背景

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

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

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

带颜色的 Html 背景

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

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

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

<tagname bgcolor = "color_value"...>

该 color_value 可以采用以下任何格式给出 -

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

例子

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

现场演示

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
 
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>

这将产生以下结果 -

带图像的 HTML 背景

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

注意- HTML5 中不推荐使用背景属性。不要使用该属性。

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

注意-不推荐使用背景属性，建议使用样式表进行背景设置。

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

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

例子

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

现场演示

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set table background -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </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>

这将产生以下结果 -