■背景屬性

在 CSS 中常見的背景 (background) 屬性有以下幾種：

background-color

background-image

background-repeat

background-attachment

background-position

每一個屬性在以下會有詳細地介紹：

 

◎background-color

background-color 屬性是用來指定背景的顏色。

  CSS 樣式   顯現結果

  body {background-color: #00FF00;}


  綠色背景  

  body {background-color: red;}  


  紅色背景  

 

◎background-image

background-image 屬性是用來指定用什麼圖案來當做背景。

CSS 樣式 顯現結果

body {background-image:url(02.gif);}

有背景圖案

 

◎background-repeat

background-repeat 屬性是用來指定背景圖案重不重複。預設值是 "repeat"，代表此背景圖案將在 x- 及 y-方向都會重覆。

其他的值為 x-repeat (x-方向重複)、y-repeat (y-方向重複)、以及 no-repeat (不重複)。

舉例如下：

CSS 樣式 顯現結果

body {
background-image:url(02.gif);
background-repeat: no-repeat;
}

背景圖案不重複。

body {
background-image:url(02.gif);
background-repeat: repeat-x;
}

背景圖案在 x-方向重複。

body {
background-image:url(02.gif);
background-repeat: repeat-y;
}

背景圖案在 y-方向重複。

body {
background-image:url(02.gif);
background-repeat: repeat;
}

背景圖案在 x- 及 y-方向重複。

 

◎background-attachment

background-attachment 屬性是用來指定背景圖案是否在螢幕上固定。

這個屬性可能的值為 "fixed" (當網頁捲動時，背景圖案固定不動) 以及 "scroll" (當網頁捲動時，背景圖案會跟著移動)。

以下是兩個例子：

body {
　background-attachment: fixed;
　background-image: url(01.jpg);
　background-repeat: no-repeat;
　}

body {
　background-attachment: scroll;
　background-image: url(01.jpg);
　background-repeat: no-repeat;
　}

 

◎background-position

background-position 屬性是用來指定背景圖案的位置。它的值可以是：

兩個字：第一個字為 [top,center,bottom] 中三選一，而第二個字由 [left,center,right] 中三選一。

兩個百分比：第一個百分比為 x-軸的百分比，第二個為 y-軸的百分比。

兩個數目：第一個數目為 x-軸的位置，第二個數目為 y-軸的位置。

舉例如下：

body {
　background-image: url(01.jpg);
　background-repeat: no-repeat;
　background-position: center top;
　} 		body {
　background-image: url(01.jpg);
　background-repeat: no-repeat;
　background-position: 20% 20%;
　}