默认情况下,您的网页背景为白色。您可能不喜欢它,但不用担心。 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)" >
示例
以下是设置 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>
带图像的 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>
图像和透明背景
您可能在各种网站上看到过许多图案或透明背景。这可以通过在背景中使用图案图像或透明图像来实现。
建议在创建图案或透明 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>