CSS语法手册（五）颜色和背景属性

1、color  3 H& S. n# n' T2 K( W7 Q
* I7 @5 r1 }( g" |! q/ f% @9 R' l; r
功能：设置前景或元素的颜色。0 c) d' L7 M+ f* e
数值：使用颜色关键字或RGB值。
, }2 L7 A! y0 H/ ?2 a+ f例子：  
) Z0 d1 D+ o1 n; t' ~  Y* Q$ h2 h' z! _$ r7 a
  * y, q, c7 [( d! q: r
5 W4 e7 |& ~* e  C- Z  q( Y
文本颜色(关键字)  % b7 i/ g* Z$ G8 @; Q/ W5 h/ ~

- l8 s1 Q1 j' V1 a文本颜色(#rrggbb)  # Y3 p! [9 `/ B6 I  T9 W$ ~9 [' _

. N3 {7 b4 C7 c# O! h' B' B6 E文本颜色[rgb(rr,gg,bb)]  
: @: W- _& K$ v; A5 [6 T7 z) A8 S1 p* [- t& b
文本颜色[rgb(r%,g%,b%)]  . h, r% l/ F: [  X9 Z

& `! y) e( d/ ?! F0 u2、background-color  
! i3 `* X+ S. b; n3 z, j* _8 i( K# Q. J6 L
功能：设置页面或页面元素的背景颜色。
  J8 U2 O+ ~: b% x1 z' d1 L* |5 g数值：  k$ r" ]) k* M& R5 j- s. X- ]
颜色 - 可用颜色名或RGB值
  F7 O; A# O! i) u. J8 _transparent - 透明，使页面背景为缺省背景。  e) o* O1 v. X# E8 P- u) I
例子：   
% s/ P( C& c  y
( U/ p5 ^+ x  h: F) @  # w  P$ |2 n, u# H3 P

% L- G7 \  W% _背景颜色
2 Z/ E8 T0 p6 c/ j  v2 B: w' k! w
) e  h9 }1 C! P! p9 s) Z3、background-image  
" M: }( n/ L9 w3 A$ H# h* E8 ?
+ f" \" v$ L1 S0 d, y  u功能：定义背景图形。2 m$ c4 F( E3 C# x6 ^- G. [3 E
数值：+ J2 E* E- S, A/ H
none - 不用图形作背景
5 o0 e2 H: p# Purl - 提供图形文件的URL地址
- g/ l. o0 c' ]* u  t; x$ S说明：也可以包括background-color属性以便在找不到图形时代用
+ i3 A5 _  \% j. R6 y3 {例子：  " C/ k; C  h) ~. `- x) }
; O% e0 q; v& ~- _) g3 t9 U
  9 F$ E# [8 G' n! _% V9 G

0 F+ K. @8 ]0 i  e0 m1 z2 f 图形背景* h) W. ^: i) M' h
! a5 I5 B* C$ C. k7 T
4、background-repeat  
; ?0 K/ q; y5 z# _7 t6 B% D/ t! `! L+ ?) g; l0 d: m  l& v2 C
功能：控制图形背景是否重复排列。
3 D/ y, [7 G( Q  H1 l8 W) _数值：
. M" L2 K3 c/ @& g4 Drepeat - 垂直和水平重复，缺省值
/ b0 R! T9 G3 \- arepeat-x - 水平重复6 y5 s. \% @) d5 T) Q7 X$ u
repeat-y - 垂直重复" H1 J( v" }7 V. e
no-repeat - 不重复
5 k9 T" w0 t8 K3 u' a$ Z说明：这个属性和 background-image 和 background-position 属性一起使用。( j1 `- L7 ]% R+ `
例子：  
! v, \" X- k! u; }; v6 I6 q- N( c3 C  |9 a7 R0 w: O. y( x2 k
  3 B/ L, M) @; F; P' A7 I
# P2 B- G9 [0 H6 o
水平重复排列7 [, y6 ~5 j; K4 V7 h! v
: ?+ R( @& z6 @# C$ B0 {9 u( N
5、background-attachment  
, T3 X% P6 d" b/ s& q7 o2 Q" X) p$ {
- [5 G' F3 g2 J; f4 ^功能：指定元素的背景是随元素一起滚动还是固定在页面某个位置上。7 P  ], L* C8 g4 R$ u* s
数值：& h  K% d+ B9 y5 k0 y) e: N& r
scroll - 随元素一起滚动
* I# z( F+ h# |5 Ifixed - 固定
" U5 N0 `) ~  `* K8 P( G! P说明：, r, [2 K& J6 T9 q4 m( b
缺省值是 scroll，这个属性和 background-image 属性一起使用。  
( o7 t  i8 E+ W+ W! P+ u/ O( r2 z; B; L" G- m; g
6、background-position  
7 M/ p& [! A& h2 R+ `6 |9 m5 l* a$ B6 ]3 \- @
功能：用于在空间中定位元素背景. ^" _  M- N" l- b, m3 c. {: [3 W
数值：1 x  G/ c0 K  h+ a+ w
长度 - 相对或绝对单位设置元素框边缘的起点，并给出单位下的坐标。
' y6 _* A0 Q; G# _7 d# D百分比 - 用百分比表示框边缘上浏览器开始放图的位置。可以重复这个值也提供垂直和水平起点
1 ?8 P, z4 u0 W& f9 V9 p+ V; S* @垂直位置 - 设置竖直方向的起点，关键字为 top, center, bottom6 N% T" p2 Y+ h1 @# T* E
水平位置 - 设置水平方向的起点，关键字 left, center, right; @, h- {" b6 n- U% N8 m9 k
例如：top left, left top和0% 0% 都表示图形左上角从元素框左上角开始5 o- o/ Z  o' v( x, e
例子：  5 W, {* h  y4 u% j( t2 R
# F* s; B* G# w- @2 C% O6 O' v
  # b" J1 S. N* l

' s1 f+ W: [$ l/ UBody {background-image:url(logo.gif); background-position:50% 50%}  
, X4 l" P, W! K
7 F7 k9 p* {9 ]/ Z6 ~% Z4 \这个语句将 Body 基本类设置为背景图形在页面上居中显示。  
8 |: j+ W: H4 ?; a- V) F1 @6 z4 F6 q- e
7、background  # e5 g7 f+ S+ [  C+ p6 k- X. V1 P

! P  b* o2 b( ]0 O; P. b4 c功能：简写属性，可以设置所有背景属性。
+ s% u8 _& ~' n5 E/ B  N  w0 j& \3 W数值：
. D5 k/ l$ z, H8 V" _: m! Wbackground-attachment
: q  @, _1 P5 C1 L, Cbackground-color
+ }. ]8 a3 e! X) x+ ebackground-image- J6 S( s6 y4 N8 X; z
background-position+ x% I6 N# @3 X$ p* |
background-repeat* A% P! d+ ~( Z
有关上述数值的细节，见各个属性部分。