无涯教程-HTML - 背景默认情况下，您的网页背景为白色。HTML提供了以下两种改变网页背景的好方法。带有颜色的背

默认情况下，您的网页背景为白色。HTML提供了以下两种改变网页背景的好方法。

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

背景颜色

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

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

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

<tagname bgcolor="color_value"...>

可以使用以下任何格式来指定此color_value:

<!-- Format 1 - 使用颜色名称 -->
<table bgcolor="lime" >
<!-- Format 2 - 使用十六进制值 -->
<table bgcolor="#f1f1f1" >
<!-- Format 3 - 在 RGB 术语中使用颜色值 -->
<table bgcolor="rgb(0,0,120)" >

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

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<!-- Format 1 - 使用颜色名称 -->
<table bgcolor="yellow" width="100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>
  </span><span class="com">&lt;!-- Format 2 - 使用十六进制值 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"#6666FF"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100%"</span><span class="tag">&gt;</span><span class="pln">
     </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">
           This background is sky blue
        </span><span class="tag">&lt;/td&gt;</span><span class="pln">
     </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;/table&gt;</span><span class="pln">

  </span><span class="com">&lt;!-- Format 3 - 在 RGB 术语中使用颜色值 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"rgb(255,0,255)"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100%"</span><span class="tag">&gt;</span><span class="pln">
     </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">
           This background is green
        </span><span class="tag">&lt;/td&gt;</span><span class="pln">
     </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;/table&gt;</span><span class="pln">

</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>
<!-- 设置表格背景 -->
<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>
<!-- 使用图案设置表格背景 -->
<table background="/images/pattern1.gif" width="100%" height="100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
  </span><span class="com">&lt;!-- 另一个使用模式的表格背景示例 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">background</span><span class="pun">=</span><span class="atv">"/images/pattern2.gif"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100%"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"100"</span><span class="tag">&gt;</span><span class="pln">
     </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">
           This background is filled up with a pattern image.
        </span><span class="tag">&lt;/td&gt;</span><span class="pln">
     </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;/table&gt;</span><span class="pln">

</body>
</html>

这将产生以下输出-

无涯教程-HTML - 背景

背景颜色

背景与图像

图案和透明背景

参考链接