HTML 背景

时间:2019-06-08 23:19:24  来源:igfitidea点击:

默认情况下,你的网页背景是白色的。

HTML为我们提供了以下两种设置网页背景的好方法。

  1. 设置颜色背景
  2. 设置图片背景

设置颜色背景

bgcolor属性用于控制HTML元素的背景,特别是页面正文和表格背景。

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

<标签名 bgcolor = "颜色值"...>

颜色值可以是以下任意格式:

  1. 使用颜色名称例如:bgcolor = "blue"
  2. 使用16进制颜色值例如:bgcolor = "blue"
  3. 使用RGB颜色值例如:bgcolor = "rgb(0,0,120)"
  4. 使用RGBA颜色值例如:bgcolor = "rgb(0,0,120,0.8)", A 0.8表示透明度
  5. 使用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>