在 CSS 中常見的背景 (background) 屬性有以下幾種:
background-color
background-color 屬性是用來指定背景的顏色。
CSS 樣式 | 顯現結果 |
p {background-color: 00FF00;} |
|
p {background-color: red;} |
|
background-image
background-image 屬性是用來指定用什麼圖案來當做背景。
CSS 樣式 | 顯現結果 |
p {background-image:url(yp.jpg);} | 有背景圖案 |
background-repeat
background-repeat 屬性是用來指定背景圖案重不重複。預設值是 "repeat",代表此背景圖案將在 x- 及 y-方向都會重覆。其他的值為 x-repeat (x-方向重複)、y-repeat (y-方向重複)、以及 no-repeat (不重複)。
舉例如下:
CSS 樣式 | 顯現結果 |
p { | 背景圖案不重複。 |
p { | 背景圖案在 x-方向重複。 |
p { | 背景圖案在 y-方向重複。 |
p { | 背景圖案在 x- 及 y-方向重複。 |
background-attachment
background-attachment 屬性是用來指定背景圖案是否在螢幕上固定。這個屬性可能的值為 "fixed" (當網頁捲動時,背景圖案固定不動) 以及 "scroll" (當網頁捲動時,背景圖案會跟著移動)。
以下是兩個例子:
body {background-attachment: fixed; background-image: url("yp.jpg"); background-repeat: no-repeat; } | body {background-attachment: scroll; background-image: url("yp.jpg"); background-repeat: no-repeat; } |
在這個視窗內,不管您如何捲動,背景圖案永遠是停留在左上方。 | 在這個視窗內,背景圖案將與捲動的動作一起移動。 |
background-position
background-position 屬性是用來指定背景圖案的位置。它的值可以是:
- 兩個字:第一個字為 [top,center,bottom] 中三選一,而第二個字由 [left,center,right] 中三選一。
- 兩個百分比:第一個百分比為 x-軸的百分比,第二個為 y-軸的百分比。
- 兩個數目:第一個數目為 x-軸的位置,第二個數目為 y-軸的位置。
舉例如下:
body { background-image: url("yp.jpg"); background-repeat: no-repeat; background-position: center center; } | body { background-image: url("yp.jpg"); background-repeat: no-repeat; background-position: 20% 20%; } |
在這個視窗內,圖案是在正中間。 | 在這個視窗中,圖案的位置離上面 20% 與離左邊 20% 的地方。 |
留言列表