HTML 背景
时间：2019-06-08 23:19:24 来源:igfitidea点击:
默认情况下，你的网页背景是白色的。
HTML为我们提供了以下两种设置网页背景的好方法。
- 设置颜色背景
- 设置图片背景
设置颜色背景
bgcolor属性用于控制HTML元素的背景，特别是页面正文和表格背景。
下面是将bgcolor属性与任何HTML标记一起使用的语法。
<标签名 bgcolor = "颜色值"...>
颜色值可以是以下任意格式：
- 使用颜色名称例如：
bgcolor = "blue" - 使用16进制颜色值例如：
bgcolor = "blue" - 使用RGB颜色值例如：
bgcolor = "rgb(0,0,120)" - 使用RGBA颜色值例如：
bgcolor = "rgb(0,0,120,0.8)", A 0.8表示透明度 - 使用HSL颜色值例如：
bgcolor = "hsl(240, 100%, 50%)"
设置背景色示例
设置表格背景色
<table bgcolor = "yellow"> <tr><td>黄色背景<td></tr> </table> <table bgcolor = "#00008b"> <tr><td>深蓝色背景<td></tr> </table> <table bgcolor = "rgb(255,0,255)"> <tr><td>粉色背景<td></tr> </table>
注意 HTML5中不推荐使用bgcolor属性。不要使用此属性。
所以现在一般是通过css或者style属性进行设置，特别是bgcolor对div，p的元素无效， 例如：
<div style="background-color:yellow"> 黄色背景 </div> <div style="background-color:#6666FF"> 紫色背景 </div> <div style="background-color:rgb(255,0,255)"> 粉色背景 </div>
黄色背景
紫色背景
粉色背景
设置图片背景
background属性还可以用于控制HTML元素的背景。
我们可以指定一个图像来设置HTML页或表的背景。
注意 HTML5中不推荐使用background属性。不要使用此属性。
建议使用样式表css进行背景设置。
下面是对任何HTML标记使用background属性的语法。
<标签名 background = "图片地址"...>
设置图片背景示例
<!DOCTYPE html>
<html>
<head>
<title>HTML 背景图片设置</title>
</head>
<body>
<!-- 设置表格背景 -->
<table background = "src/table.png" width = "100%" height = "100">
<tr><td>
使用图片做表格的背景图
</td></tr>
</table>
</body>
</html>
图案透明背景
你可能在不同的网站上看到了很多模式或透明的背景。这可以通过在背景中使用图案图像或透明图像来实现。
建议在创建图案或透明的GIF或PNG图像时，尽可能使用最小的尺寸，甚至是1x1，以避免加载缓慢。
一些老的网站就使用图案来做网页的背景：
<!DOCTYPE html>
<html>
<head>
<title>HTML 图片背景</title>
</head>
<body background = "/images/pattern1.png" width = "100%" >
<div style="width:300px;height:200px">
设置图片背景
</div>
</body>
</html>
