CSS 背景 (Background)

CSS 背景 (Background)

body
  { 
  background-image: url(bgimage.gif);
  background-color: #000000;
  }

background-color

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

CSS 樣式 顯現結果

p {background-color: 00FF00;}

綠色背景
 

p {background-color: red;}

紅色背景
 


background-image

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

 

CSS 樣式 顯現結果

p {background-image:url(bg.jpg);}

有背景圖案

 


background-repeat

background-repeat 屬性是用來指定背景圖案重不重複。預設值是 "repeat",代表此背景圖案將在 x- 及 y-方向都會重覆。其他的值為 x-repeat (x-方向重複)、y-repeat (y-方向重複)、以及 no-repeat (不重複)。

瀏覽器支持

所有瀏覽器都支持background-repeat 屬性。

註釋:任何版本的Internet Explorer (包括IE8)都不支持屬性值"inherit"。

提示和註釋

提示:背景圖像的位置是根據background-position屬性設置的。如果未規定background-position屬性,圖像會被放置在元素的左上角。

可能的值

描述
repeat 默認。背景圖像將在垂直方向和水平方向重複。
repeat-x 背景圖像將在水平方向重複。
repeat-y 背景圖像將在垂直方向重複。
no-repeat 背景圖像將僅顯示一次。
inherit 規定應該從父元素繼承background-repeat 屬性的設置

舉例如下:

CSS 樣式 顯現結果

p {
background-image:url(yp.jpg);
background-repeat: no-repeat;
}

背景圖案不重複。

 

p {
background-image:url(yp.jpg);
background-repeat: repeat-x;
}

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

 

p {
background-image:url(yp.jpg);
background-repeat: repeat-y;
}

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

 

p {
background-image:url(yp.jpg);
background-repeat: repeat;
}

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

 


background-attachment

background-attachment 屬性是用來指定背景圖案是否在螢幕上固定。這個屬性可能的值為 "fixed" (當網頁捲動時,背景圖案固定不動) 以及 "scroll" (當網頁捲動時,背景圖案會跟著移動)。

body 
  { 
  background-image: url(bgimage.gif); 
  background-attachment: fixed;
  }

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

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

 

瀏覽器支持

所有瀏覽器都支持background-attachment 屬性。

註釋:任何版本的Internet Explorer (包括IE8)都不支持屬性值"inherit"。

可能的值

描述
scroll 默認值。背景圖像會隨著頁面其餘部分的滾動而移動。
fixed 當頁面的其餘部分滾動時,背景圖像不會移動。
inherit 規定應該從父元素繼承background-attachment 屬性的設置。

background-position

瀏覽器支持

所有瀏覽器都支持background-position 屬性。

註釋:任何版本的Internet Explorer (包括IE8)都不支持屬性值"inherit"。

可能的值

描述
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

如果您僅規定了一個關鍵詞,那麼第二個值將是"center"。

默認值:0% 0%。

x% y%

第一個值是水平位置,第二個值是垂直位置。

左上角是0% 0%。右下角是100% 100%。

如果您僅規定了一個值,另一個值將是50%。

xpos ypos

第一個值是水平位置,第二個值是垂直位置。

左上角是0 0。單位是像素(0px 0px) 或任何其他的CSS 單位。

如果您僅規定了一個值,另一個值將是50%。

您可以混合使用% 和position 值。

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

  • 兩個字:第一個字為 [top,center,bottom] 中三選一,而第二個字由 [left,center,right] 中三選一。
  • 兩個百分比:第一個百分比為 x-軸的百分比,第二個為 y-軸的百分比。
  • 兩個數目:第一個數目為 x-軸的位置,第二個數目為 y-軸的位置。

body { background-image: url("bg.jpg");
background-repeat: no-repeat;
background-position: center center;
}

body { background-image: url("bg.jpg");
background-repeat: no-repeat;
background-position: 20% 20%;
}