上一章HTML教程请查看:html块级元素和内联元素
【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>
推荐阅读
- html颜色和字体 – HTML教程
- html块级元素和内联元素 – HTML教程
- html iframe用法 – HTML教程
- html框架frame – HTML教程
- html邮件链接 – HTML教程
- html图片链接 – HTML教程
- html文本链接 – HTML教程
- html列表(ul、ol和dl – HTML教程)
- html表格table – HTML教程