Warning:
This wiki has been archived and is now read-only.
CSS2/colors
顏色與背景
内容概要
前景色彩 ― 'color' 屬性
背景
背景屬性 ― 'background-color'、'background-image'、'background-repeat'、'background-attachement'、'background-position' 與 'background' 屬性
'background-position'| 取值： | [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit |
| 初始： | 0% 0% |
| 適用於： | 所有元素 |
| 繼承： | 否 |
| 百分比： | 相對於盒的大小 |
| 媒介： | 視覺 |
| 計算值： | 把 <length> 算成絕對值，否則百分比值 |
若網頁作者指定了背景圖像，本屬性可以用來指定圖像的初始位置。若給定的取值只有一個，則推定第二個值為 'center'。若給定的取值有兩個且至少有一個不是關鍵字，第一個值表示水平位置，第二個值表示垂直位置。本規範允許負的 <percentage> 或是 <length>。
百分比值 X 將圖像在左往右（水平位置）或是上往下（垂直位置） X% 的點與元素邊距盒左往右（水平位置）或是上往下（垂直位置） X% 的點對齊。舉例來說，如果取值對是 '0% 0%'，圖像的左上角會跟盒的邊距盒的左上角對齊。取值對 '100% 100%' 會將圖像的右下角放在邊距盒的右下角。取值對 '14% 85%' 會將圖像中從左往右 14% 從上往下 84% 的點放在邊距盒中從左往右 14% 從上往下 84% 的點。
長度 L 將圖像的左上角與元素邊距盒左上角向右（水平位置）或是向下（垂直位置）距離 L 的位置對齊。舉例來說，取值對 '2cm 1cm' 會將圖像的左上角放在邊距盒左上角向右 2cm 向下 1cm 的地方。
top
right
bottom
left
center
然而，若圖像具有內在綜橫比但無內在大小，則位置在 CSS2.1 裡無定義。
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% */
本規範未定義背景圖像如何在行內元素定位與鋪設。CSS 的未來層級可能定義背景圖像如何在行內元素定位與鋪設。
若背景圖像在視口中固定（參見 'background-attachement' 屬性），圖像的配置相對於視口而不是元素的邊距盒。舉裡來說，
body {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
在上面的例子中，（單一個）圖像配置在視口的右下角。| 取值： | [ <'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'> ] | inherit |
| 初始： | 參見各屬性 |
| 適用於： | 所有元素 |
| 繼承： | 否 |
| 百分比： | 可在 'background-position' 上使用 |
| 媒介： | 視覺 |
| 計算值： | 參見各屬性 |
'background' 屬性是在樣式表裡一次設定各背景屬性（也就是 'background-color'、'background-image'、'background-repeat'、'background-attachment' 與 'background-position'）。
給定一個合法宣告，'background' 屬性先將各背景屬性設為初始值，再設定宣告中有的取值。
BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }