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 }