个性化阅读
专注于IT技术分析

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>
赞(0)
未经允许不得转载:srcmini » html背景颜色 – HTML教程

评论 抢沙发

评论前必须登录!