CSS手冊簡編：顏色背景屬性

css

CSS屬性：

4、顏色和背景（Color and Background）屬性：

這裡介紹有關CSS中前景色彩和背景顏色、圖片的設定方法。

color屬性：

color屬性用於設定元素的前景色彩：

屬性名稱: 'color'
屬性值: <color>
初始值: 根據使用者的初始值而定
適合對象: 所有元素
是否繼承: yes
百分比備忘: 被禁止

color屬性的值可以是十六進位數值、rgb()函數或CSS承認的顏色名稱。如：

EM { color: red }
EM { color: rgb(255,0,0) }

背景屬性：

background-color屬性用於設定背景色，初始值為透明：

屬性名稱: 'background-color'
屬性值: <color> | transparent
初始值: transparent
適合對象: 所有元素
是否繼承: no
百分比備忘: 被禁止

backgroud-image屬性用於設定背景的圖片：

屬性名稱: 'background-image'
屬性值: <url> | none
初始值: none
適合對象: 所有元素
是否繼承: no
百分比備忘: 被禁止

其中url可以為絕對位址，也可以是相對位址，例如：

BODY { background-image: url(marble.gif) }
P { background-image: none }

以上兩個屬性利用普通的HTML屬性也可以實現，下面的屬性是CSS對原有HTML的擴充。
background-repeat屬性用來描述背景圖片的重複相片順序：

屬性名稱: 'background-repeat'
屬性值: repeat | repeat-x | repeat-y | no-repeat
初始值: repeat
適合對象: 所有元素
是否繼承: no
百分比備忘: 被禁止

其中屬性值的含義為：
repeat：沿X軸和Y軸兩個方向重複顯示圖片。
repeat-x：沿X軸方向重複圖片。
repeat-y：沿Y軸方向重複圖片。
none：不重複圖片。

例如：

BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
/*表示沿Y軸重複圖片"pendant.gif"，其餘部分以紅色為背景色*/

background-attachment屬性工作表示在滾動整個文檔時，背景圖片的顯示方式。它的屬性值有兩種：fixed和scroll，fixed相當於IE4裡的浮水印效果，也就是說在拖動文檔時，背景相對是靜止的，scroll則和文檔一起滾動。

background-position屬性用來指定背景圖片顯示的位置：

屬性名稱: 'background-position'
屬性值: [<percentage> | <length> ]{1,2} | [top | center | bottom] || [left | center | right]
初始值: 0% 0%
適合對象: 容器元素
是否繼承: no
百分比備忘: refer to the size of the element itself

其中屬性值含義為：
"top left"和"left top"表示"0% 0%"。
"top"、"top center"和"center top"表示"50% 0%"。
"right top"和"top right"都表示"100% 0%"。
"left"、"left center"和"center left"表示"0% 50%"。
"center"和"center center"表示"50% 50%"。
"right"、"right center"和"center right"都表示"100% 50%"。
"bottom left"和"left bottom"表示"0% 100%"。
"bottom"、"bottom center"和"center bottom"都表示"50% 100%"
"bottom right"和"right bottom"表示"100% 100%"。
例如：

BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */

background屬性是以上背景屬性的捷徑，屬性和順序如下：

屬性名稱: 'background'
屬性值: <'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>
適合對象: 所有元素
是否繼承: no
百分比備忘: 只在background-position中容許使用