14 颜色与背景

内容

CSS属性允许编写者指定元素的前景色和背景。背景可以是颜色或图像。背景属性允许编写者定位一幅背景图像,平铺(repeat)它,以及声明它应该相对视口固定还是随文档滚动

合法颜色值的语法见颜色单位小节

14.1 前景色'color'属性

'color'
Value:  <color> | inherit
Initial:  取决于用户代理
Applies to:  所有元素
Inherited:  yes
Percentages:  N/A
Media:  visual
Computed value:  与指定值相同

该属性描述了元素文本内容的前景色。有几种不同的方式来指定红色:

示例:

em { color: red }              /* predefined color name */
em { color: rgb(255,0,0) }     /* RGB range 0-255   */

14.2 背景

编写者可以把一个元素的背景(即,其渲染面(rendering surface))指定为 颜色或图像。根据盒模型,“背景”是指内容内边距边框区的背景。边框颜色和样式通过边框属性来设置,而外边距(区)总是透明的

背景属性是不可继承的,但默认情况下父级盒的背景将透过来,因为'background-color'的初始值为'transparent'

根元素的背景会成为画布的背景并覆盖整个画布,被定位(用'background-position')在同一个位置,就像它只是为根元素本身绘制的一样。根元素不会再次绘制这个背景

然而,对于HTML文档,我们建议编写者给BODY元素指定背景,而不是给HTML元素。对于那些根元素是'background-color'计算值为'transparent'且'background-image'计算值为'none'的HTML的"HTML"元素或者XHTML的"html"元素的文档,用户代理在给画布绘制背景时,必须应用该元素的第一个HTML的"BODY"元素或者XHTML的"body"元素子级的背景属性的计算值,并且不给那些子元素绘制背景(作为画布的背景覆盖整张画布)。这种背景也必须被定位到同一个位置,就像它们只是为根元素绘制的一样

根据这些规则,如下HTML文档下层的画布将具有一个"marble"背景:

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

注意,即使在HTML源码中省略了BODY标签,BODY元素上的规则仍将生效,因为HTML解析器会推断出缺少的标签

形成了堆叠上下文(见'z-index'属性)的元素的背景会被绘制在该元素的堆叠上下文的底部,在堆叠上下文中的所有东西的下面

14.2.1 背景属性'background-color''background-image''background-repeat''background-attachment''background-position''background'

'background-color'
Value:  <color> | transparent | inherit
Initial:  transparent
Applies to:  所有元素
Inherited:  no
Percentages:  N/A
Media:  visual
Computed value:  与指定值相同

该属性设置了元素的背景色,要么是个<color>值,要么是关键字'transparent'让底层颜色透出来

示例:

h1 { background-color: #F00 }
'background-image'
Value:  <uri> | none | inherit
Initial:  none
Applies to:  所有元素
Inherited:  no
Percentages:  N/A
Media:  visual
Computed value:  绝对URI或none

该属性设置了一个元素的背景图像。在设置一幅背景图像时,编写者还应该指定将在图像不可用时应用的背景色。当图像可用时,它会被渲染在背景色上面(因此,在图像的透明部分背景色是可见的)

该属性的值为用来指定图像的<uri>,或'none',表示不使用图像

示例:

body { background-image: url("marble.png") }
p { background-image: none }

百分比形式的固有尺寸必须根据为'background-position'属性建立坐标系的矩形的尺寸来解析

如果具有固有宽度或者固有高度和固有宽高比,那么缺少的尺寸就根据给定的尺寸和比例来计算

如果图像具有固有宽度或者固有高度但没有固有宽高比,那么缺少的尺寸被假设为给'background-position'属性建立坐标系的矩形的尺寸

如果图像没有固有尺寸但具有固有比例,就把尺寸假定为不超出给'background-position'属性建立坐标系的矩形中满足该比例的最大尺寸

如果图像没有固有比例,那么就把尺寸假定为给'background-position'属性建立坐标系的矩形

'background-repeat'
Value:  repeat | repeat-x | repeat-y | no-repeat | inherit
Initial:  repeat
Applies to:  所有元素
Inherited:  no
Percentages:  N/A
Media:  visual
Computed value:  与指定值相同

如果指定了一幅背景图像,该属性指定了此图像是否需要平铺,以及怎样平铺。整个平铺会覆盖盒的内容内边距边框

行内元素上background-image的平铺和定位在本规范中是未定义的。将来的CSS版本可能会定义行内元素上background-image的平铺和定位

属性值含义如下:

repeat
图像在水平方向和垂直方向都平铺
repeat-x
图像只在水平方向平铺
repeat-y
图像只在垂直方向平铺
no-repeat
图像不平铺:只绘制该图像的一份副本

示例:

body { 
  background: white url("pendant.png");
  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'
Value:  scroll | fixed | inherit
Initial:  scroll
Applies to:  所有元素
Inherited:  no
Percentages:  N/A
Media:  visual
Computed value:  与指定值相同

如果指定了一幅背景图像,该属性指定了它应该相对视口固定('fixed')还是随包含块滚动('scroll')

注意,每个视图只有一个视口。如果一个元素具有滚动机制(见'overflow'),'fixed'背景不会随元素一起移动,而'scroll'背景也不会随滚动机制一起移动

即使图像是固定的,它仍然只在处于该元素的内容,内边距或边框区时才可见。因此,图像可能不可见,除非它是平铺的('background-repeat: repeat')

分页媒体中没有视口,'fixed'背景相对页盒固定,并且因此在每一页上重复出现

示例:

本例创建了一个在元素滚动时,“粘”在视口上的无限竖带

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

不支持'fixed'背景的用户代理(例如,由于硬件平台的限制)应该忽略带有'fixed'关键字的声明,例如:

body {
  background: white url(paper.png) scroll; /* for all UAs */
  background: white url(ledger.png) fixed; /* for UAs that do fixed backgrounds */
}

详情见一致性章节

'background-position'
Value:  [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
Initial:  0% 0%
Applies to:  所有元素
Inherited:  no
Percentages:  参照该盒本身的尺寸
Media:  visual
Computed value:  对于<length>是绝对的值,否则就是百分比

如果指定了一幅背景图像,该属性指定了它的初始位置。如果只指定了一个值,第二个值就假定为'center'。如果至少有一个值不是关键字,那么第一个值表示水平位置,第二个值表示垂直位置。允许负的<percentage>和<length>值

<percentage>
百分比值X会把图像在横向(水平方向)或者纵向(垂直方向)X%的点与该元素的内边距框横向或者纵向X%的点对齐。例如,值为'0% 0%'对儿时,图像的左上角与内边距框的左上角对齐。值为'100% 100%'对时,把图像的右下角放在内边距框的右下角。值为'14% 84%'对时,把图像横向14%纵向84%的位置放在内边距框的横向14%纵向84%的位置
<length>
长度L是让图像的左上角与该元素的内边距框的左上角向右(水平方向)或者向下(垂直方向)距离L的位置对齐。例如,值为'2cm 1cm'对,图像的左上角放在距内边距框左上角向右2cm向下1cm的位置
top
等价于垂直位置的'0%'
right
等价于水平位置的'100%'
bottom
等价于垂直位置的'100%'
left
等价于水平位置的'0%'
center
等价于水平位置的'50%',如果没有给定(水平位置)的话,或者垂直位置的'50%',如果给定了(水平位置)

然而,如果图像具有固有比例但没有固有尺寸,其位置在CSS 2.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% */

行内元素上background-image的平铺和定位在本规范中是未定义的。将来的CSS版本可能会定义行内元素上background-image的平铺和定位

如果背景图像在视口中是固定的(见'background-attachment'属性),图像就相对于视口放置,而不是该元素的内边距框。例如,

示例:

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

上例中,(单个)图像位于视口的右下角

'background'
Value:  [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
Initial:  见单独的各个属性
Applies to:  所有元素
Inherited:  no
Percentages:  允许'background-position'上的百分比
Media:  visual
Computed value:  见单独的各个属性

'background'属性是一个简写属性,用来在样式表中一次性设置各个背景属性(即,'background-color''background-image''background-repeat''background-attachment''background-position'

对于一个给定的合法声明,'background'属性先把所有单独的背景属性设置为它们的初始值,然后显式赋值为声明中给定的值

示例:

下例的第一条规则中,只给出了一个'background-color'值,那么其它各个属性会被设置为其初始值。第二条规则中,所有单独的属性都给定了

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