上一章HTML教程请查看:html块级元素和内联元素
默认情况下,你的网页背景是白色的,你可能不喜欢,但不用担心,HTML为你提供了以下两种装饰你的网页背景的好方法。
- 带颜色的HTML背景
- HTML背景图片
现在,让我们使用适当的示例逐个查看这两种方法。
带颜色的Html背景
bgcolor属性用于控制HTML元素的背景,特别是页面主体和表背景。
注意,bgcolor属性在HTML5中被弃用,不要使用此属性。
下面是使用任何HTML标记的bgcolor属性的语法。
<tagname bgcolor = "color_value"...></tagname>
这个color_value可以以以下任何一种格式给出
<!-- 格式 1 - 颜色名称 -->
<table bgcolor = "lime" >
<!-- 格式 2 - hex值 -->
<table bgcolor = "#f1f1f1" >
<!-- 格式 3 - 使用RGB术语中的颜色值 -->
<table bgcolor = "rgb(0,0,120)" ></table>
例子
下面是一些设置HTML标签背景的例子:
<!DOCTYPE html>
<html>
<head>
<title>HTML背景颜色</title>
</head>
<body>
<!-- 格式 1 - 颜色名 -->
<table bgcolor = "yellow" width = "100%">
<tr>
<td>
背景是黄色
</td>
</tr>
</table>
<!-- 格式 2 - hex值 -->
<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中被弃用,不要使用此属性。
下面是使用任何HTML标记的背景属性的语法。
注意,不推荐使用背景属性,建议使用样式表作为背景设置。
<tagname background = "Image URL"...>
最常用的图像格式是JPEG、GIF和PNG图像。
例子
下面是设置表的背景图像的示例。
<!DOCTYPE html>
<html>
<head>
<title>HTML背景图片</title>
</head>
<body>
<!-- 设置table背景 -->
<table background = "/images/html.gif" width = "100%" height = "100">
<tr><td>
这个背景是用HTML图像填充的。
</td></tr>
</table>
</body>
</html>
图案和透明的背景
你可能在不同的网站上看到过许多图案或透明的背景,这可以简单地通过在背景中使用图案图像或透明图像来实现。
建议在创建模式或透明的GIF或PNG图像时,使用尽可能小的尺寸,甚至小到1×1,以避免缓慢加载。
例子
下面是设置表格背景图案的例子
<!DOCTYPE html>
<html>
<head>
<title>HTML背景图片</title>
</head>
<body>
<!-- 使用图案设置表背景 -->
<table background = "/images/pattern1.gif" width = "100%" height = "100">
<tr>
<td>
这个背景由一个图案图像填充。
</td>
</tr>
</table>
<!-- 另一个使用图案的表背景示例 -->
<table background = "/images/pattern2.gif" width = "100%" height = "100">
<tr>
<td>
这个背景由一个图案图像填充。
</td>
</tr>
</table>
</body>
</html>
评论前必须登录!
注册