HTML - 背景介绍 首页HTMLHTML - 背景

默认情况下,您的网页背景为白色。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>

这将产生以下输出-

背景与图像

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

注意-HTML5中不推荐使用 background 属性。不要使用此属性。

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

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

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

这将产生以下输出-

这一章你学到了什么?做个笔记,好记忆不如烂笔头! 如果觉得对您有帮助,请分享给您的朋友。

祝学习愉快! (您也可以 选中需要修改的内容->右键->进行编辑)

点我分享笔记