14 ��ɫ�ͱ���

    Ŀ¼

    CSS������������ָ��һ��Ԫ�ص�ǰ��ɫ�ͱ���ɫ��������������ɫ��ͼ�Ρ����������������߶�λ����ͼ�Σ��ظ��������������Ƿ�Ӧ��������ӵ��̶������Ǻ��ĵ�һ�������

    �Ϸ�����ɫֵ���﷨���μ���ɫ��λ��

14.1 ǰ��ɫ��'color'����

'color'
ֵ��  <color> | inherit
��ʼֵ��  ȡ�����û���
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ������������һ��Ԫ�ص��ı����ݵ�ǰ����ɫ���в�ͬ������ָ����ɫ��

���ӣ�

    

EM { color: red }              /* Ԥ�ȶ������ɫ�� */
EM { color: rgb(255,0,0) }     /* RGB��Χ 0-255   */

14.2 ����

    ���߿���ָ��һ��Ԫ�صı�������������Ⱦ���棩Ϊһ����ɫ��һ��ͼ�Ρ���������ģ���У�����������ָ�������߰�����ı������߿���ɫ����ʽ���߿���ʽ�趨���߾�����͸���ģ���˸���ı�������͸������

    �������Բ��ɼ̳У����Ǹ���ı�����ȱʡ��͸������������Ϊ'background-color'��ȱʡֵΪ'transparent'��

    �ɸ�Ԫ�ز����Ŀ�ı�������������Ⱦ������

    ����������HTML�ĵ��������Ƽ�����ָ��BODYԪ�صı���������HTML�ı������û���Ӧ����ѭ���µ����ȹ�������䱳�������HTMLԪ�ص�'background'����ȡֵ����'transparent'����ôʹ�ø����ԣ�����ʹ��BODYԪ�ص�'background'���ԡ�������Ϊ'transparent'�������Ⱦδ�����塣

    ������Щ���������HTML�ĵ��µ���Ⱦ������һ��������ʯ���ı�����

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Setting the canvas background</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://style.com/marble.png") }
    </STYLE>
  </HEAD>
  <BODY>
    <P>My background is marble.
  </BODY>
</HTML>

14.2.1 ����������'background-color'��'background-image'��'background-repeat'��'background-attachment'��'background-position'��'background'

'background-color'
ֵ��  <color> | transparent | inherit
��ʼֵ��  transparent
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ������������һ��Ԫ�صı���ɫ��������һ��<color>ֵ�����ǹؼ���'transparent'������ʹ���µ���ɫ��͸������

���ӣ�

    

H1 { background-color: #F00 }
'background-image'
ֵ��  <uri> | none | inherit
��ʼֵ��  none
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ������ָ����Ԫ�صı���ͼ�Ρ����ñ���ͼ��ʱ������ҲӦ��ͬʱ����һ������ɫ�Կ��DZ���ͼ�β����õ�������������ͼ�ο��ã����ڱ���ɫ֮�ϵõ���Ⱦ������ˣ���ͼ�ε�͸�����򣬱���ɫ�ǿɼ��ġ���

    ������ֵҪô��һ��<uri>��ָ��ͼ�Σ�Ҫô��'none'������ʹ��ͼ�Ρ�

Example(s):

    

BODY { background-image: url("marble.gif") }
P { background-image: none }
'background-repeat'
ֵ��  repeat | repeat-x | repeat-y | no-repeat | inherit
��ʼֵ��  repeat
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ���ָ����һ������ͼ�Σ�������ָ��ͼ���Ƿ��ظ���ƽ�̣����Լ����ƽ�̡����е�ƽ�̽�����һ��������������߰�����ȡֵ�ĺ������£�

repeat
ͼ����ˮƽ�ʹ�ֱ�����ظ���
repeat-x
ͼ��ֻ��ˮƽ�����ظ���
repeat-y
ͼ��ֻ�ڴ�ֱ�����ظ���
no-repeat
ͼ�β��ظ�����ֻ������ͼ�ε�һ��������

���ӣ�

BODY { 
  background: white url("pendant.gif");
  background-repeat: repeat-y;
  background-position: center;
}

    A centered background image,
with copies repeated up and down the padding and content areas.   [D]

����ͼ�ε�һ���������У������Ŀ������������Ϻ����£��Ӷ���Ԫ�غ��������һ����ֱ��ͼ�δ���

'background-attachment'
ֵ��  scroll | fixed | inherit
��ʼֵ��  scroll
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ��������˱���ͼ�Σ�������ָ����ͼ���Ƿ�����ӵ��̶���'fixed'���������ĵ�������'scroll'����

    ��ʹͼ���ǹ̶��ģ���Ҳֻ����Ԫ�صı����ͱ߰�����ɼ�����ˣ�����ͼ��ƽ�̣�'background-repeat: repeat'�����������Dz��ɼ��ġ�

���ӣ�

    ����������һ�����޳��Ĵ�ֱͼ�δ�����Ԫ�ع���ʱ������ճ�������ӵ��ϡ�

BODY { 
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

    �û��˿��Խ�'fixed'����Ϊ'scroll'���������Ƽ��������������ȷ�ؽ���'fixed'�������Ƕ���HTML��BODYԪ������ˣ���Ϊû��һ�ַ���ʹһ������ֻΪ��Щ֧��'fixed'��������ṩһ��ͼ�Ρ�����ϸ�ڲμ�һ������

'background-position'
ֵ��  [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
��ʼֵ��  0% 0%
�����ڣ�  ������滻Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  ���ڿ����ijߴ�
ý�飺  ͼ��

    ���ָ����һ������ͼ�Σ�������ָ�������ij�ʼλ�á�ȡֵ�ĺ������£�

<percentage> <percentage>
���ȡֵΪ'0% 0%'��ͼ�ε����ϽǶ���ÿ���߰ױ������Ͻǡ�ȡֵΪ'100% 100%'��ͼ�ε����½Ƕ���߰���������½ǡ�ȡֵΪ'14% 84%'��ͼ�ξ���14%���ඥ84%�ĵ����߰������о���14%���ඥ84%�ĵ㡣
<length> <length>
ȡֵΪ'2cm 2cm'��ͼ�ε����ϽǷ����ھ�߰���������Ͻ���2cm����2cm����
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%'��

    ���ֻ����һ���ٷֱȻ򳤶�ֵ����ֻ����ˮƽλ�ã���ֱλ��Ϊ50%�������������ֵ��������ˮƽλ�á����ȺͰٷֱȵĻ������������ģ��磬'50% 2cm'��������λ��Ҳ�������ġ��ؼ��ֲ����ԺͰٷֱȻ򳤶�ֵ���ã����п��ܵĹؼ�������Ѿ��������������

���ӣ�

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-attachment'���ԣ���ͼ��������ӵ���ö����������Ԫ�صı߰��������磬

���ӣ�

BODY { 
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
} 

    �����У�����һ��ͼ�η������ӵ�����½ǡ�

'background'
ֵ��  [<'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'�������������еĶ�����������Ϊ���ǵ�ȱʡֵ��Ȼ��������������ʽ������ֵ��

���ӣ�

    �����ĵ�һ������ֻ������'background-color'һ��ֵ���������Ķ�����������Ϊ���ǵij�ʼֵ���ڶ����������������еĶ������ԡ�

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

14.3 ٤��ϵ��У��

    �й�٤��ϵ������Ϣ����μ�PNG�淶�е�٤��̳̣�[PNG10]����

    ����٤��У��ʱ����ʾ��һ����ʾ���ϵ��û��˿��Լٶ���һ���������ʾ���������κ�����ɫ�����������٤��Ч���������ζ�������ڵ�ǰƽ̨������Ҫ�������ٵĴ����ǣ�

ʹ��MS-Windows��PC
û��
ʹ��X11��Unix
û��
ʹ��QuickDraw��Mac
٤��ϵ��Ϊ1.45 [ICC32]���ܹ�ColorSync��Ӧ�ó�����ܼ򵥵�����sRGB ICC���õ�ColorSync���Խ�����ȷ��ɫ��У����
ʹ��X��SGI
Ӧ�õ�٤��ֵ����/etc/config/system.glGammaVal��ȱʡֵΪ1.70��������Irix 6.2����߰汾�ϵ�Ӧ�ó�����ܼ򵥵�����sRGB ICC���õ���ɫ����ϵͳ��
ʹ��NeXTStep��NeXT
٤��ϵ��Ϊ2.22

    ��Ӧ��٤�ꡱ��ζ�Ŷ���ÿһ��R/G/B�����DZ��뱻ת����R'=Rgamma��G'=Ggamma��B'=Bgamma��Ȼ���ٴ��ݵ�����ϵͳ��

    ��һ���̿��Ժܿ����ɡ�����ͨ����ÿ�μ��������ʱ����һ������256��Ԫ�صIJ�ѯ������ɵģ�

for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

    ��ͱ����˶���ÿһ����ɫ���Խ�����˸������ѧ���㣬����˵��ÿһ�����ص��ˡ�