極客書

HTML - Backgrounds

默認情況下，網頁背景爲白色。你可能不喜歡，但別擔心。HTML提供了以下兩種裝飾網頁背景的好方法。

  • HTML Background with Colors
  • HTML Background with Images

現在，讓我們使用適當的示例逐一查看這兩種方法。

Html Background with Colors

bgcolor屬性用於控制HTML元素的背景，特別是頁面正文和表格背景。

注意−HTML5中不推薦使用bgcolor屬性。不要使用此屬性。

下面是將bgcolor屬性與任何HTML標記一起使用的語法。

<tagname bgcolor = "color_value"...>

這個顏色值可以用以下任何格式給出−

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

Example

下面是設置HTML標記背景的示例−

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
 
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>

這將產生以下結果&負;

Html Background with Images

background屬性還可用於控制HTML元素的背景，特別是頁面正文和表格背景。您可以指定一個圖像來設置HTML頁面或表的背景。

注意−在HTML5中不推薦使用background屬性。不要使用此屬性。

下面是將background屬性與任何HTML標記一起使用的語法。

注意−不推薦使用background屬性，建議使用樣式表進行背景設置。

<tagname background = "Image URL"...>

最常用的圖像格式是JPEG、GIF和PNG圖像。

Example

下面是設置表格背景圖像的示例。

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set table background -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </body>
   
</html>

這將產生以下結果&負;

Patterned & Transparent Backgrounds

你可能在不同的網站上看到過許多圖案或透明的背景。這可以通過在背景中使用圖案圖像或透明圖像來實現。

建議在創建模式或透明的GIF或PNG圖像時，儘可能使用最小的尺寸，甚至小到1x1，以避免加載緩慢。

Example

下面是設置表格背景圖案的示例−

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>

      <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>

這將產生以下結果&負;