该部分的主题是控制单元背景的CSS特性。
这里的背景是指置于样式单元内容之后的颜色和图像。这些特性是BODY单元的 background 和 bgcolor 属性更一半意义上的代替,它们可以指定单元的背景,也可以对背景的位置和平铺状态进行控制。CSS提供了6个与背景有关的特性,它们分别控制背景颜色、背景图像、背景图像定位和平铺格式。
● 1.背景颜色 (background-color)
CSS特性 background-color 定义单元背景颜色,其值可以是16个所允许的颜色名称中的一个(如“blue”),也可以是任何一种所定义的RGB颜色代码。比如。描述背景色“aqua”(零色度的红,全色度的绿和蓝)的五种方法是:
background-color : aqua ; /* Named Color */
background-color : #00FFFF ; /* Hexadecimal RGB code */
background-color : #0FF ; /* "Half-number" Hex RGB code */
background-color : rgb(0,255,255) ; /* Integer RGB code */
background-color : rgb(0,100%,100%) ; /* Percentage RGB code */
十六进制亮度的范围是从00(零亮度)到FF(全亮度),共256级。因此,代码 #00FFFF 代表零亮度的红、全亮度分绿和蓝。简写形式 #0FF 可通过双写每一位数字来得到全十六进制代码:0变为00,F变为FF,依此类推。整型RGB代码用0到255之间的整数表示亮度。百分比代码则用实型百分比值,如用65.23%表示亮度。浏览器可把这些百分比值转换为相应的整数值。
Background-color可用于包括IMG在内的所有HTML单元。对块级单元,背景颜色将用于单元height和width特性定义的区域。对行间单元,背景区域在水平方向上由单元文本所跨范围定义,在竖直方向上由行高定义。单元周围的衬距和单元有相同的背景特性。
设置了背景颜色后,单元背景将不再透明,其下内容均不可见。而如果背景颜色(或图像)没有指定,则背景是透明的,其下内容都可见。大多数情况下,下层内容正好是父单元的背景。当然,如果通过使用负边距把“透明”单元放在另一个单元之上,下层内容也会是置于下面的单元的背景或内容。
背景颜色是置于其上的所有单元和背景图像的“背景”,因此,如果一个单元既有背景颜色,又有背景图像,那么背景图像中的透明象素将显示由 background-color 特性定义的颜色。
提醒:背景和前景颜色必须同时确定,以确保所显示的文本是可读的。即使使用了背景图像,这一点也非常重要,因为如果文本阅读者不能载入图像,那么文本将在指定背景颜色下显示。
● 2.背景图像 (background-image)
用特性 background-image 指定单元的背景图像。这个特性可取值为引用背景图像的URL,例如:
background-image : url(http://www.shanxiwindow.net/chat/image/bg.gif) ;
background-image : url(../image/bg.gif) ;
缺省情况下,背景图像平铺(tiled)于单元之下;也就是说,背景图像总是充满单元和其衬距所在的空间。缺省情况下,平铺的过程始于单元的左上角,然后再遍及整个单元内容区并外延到单元四周的衬距中。
● 3.平铺方式的控制 (background-repeat)
特性 background-repeat 控制背景图像的平铺方式。该特性可取四个值。其缺省值是 repeat ,此时图像将水平地和竖直地平铺。其余三个值的说明为:
值 no-repeat 关闭平铺——背景图像仅显示一次,缺省情况下显示在单元的左上角。而值 repeat-x 要求背景图像沿 x 轴(水平方向)重复出现,同样,repeat-y 要求背景图像沿y轴(竖直方向)重复出现。
Repeat-x 和 repeat-y 方式可以很方便地创建文本的水平和竖直边界,但有时设计者总希望把文本置于平铺区之外,这可以通过衬距把文本边缘推到平铺区之外来实现——别忘了,缺省情况下,平铺总是从衬距外边缘开始。
● 4.背景图像的初始位置 (background-position)
如前所述,缺省情况下背景图像的初始位置是单元的左上角。如果图像平铺,它总是从这个位置开始。
实际上,这并不总是合适的起点。比如,设计者经常希望置一幅背景图像于单元的中心。要实现这样的放置,只能设法把初始位置从单元左上角移开。
CSS特性 background-position 可定义背景的起始点,起始点相对于单元的左上角来定义。该特性的取值可采取不同的格式。如果背景图像反复出现,那么它将从 background-position 指定的位置处开始反复。
注意:background-position 特性只能用于块级单元或替代单元,因为只有这些单元才有明确定义的框用于起始点的定义。
安排背景位置最容易的方法是使用关键字:
横向的关键字 (left, center, right)
纵向的关键字 (top, center, bottom)
百分比和长度也可用作安排背景图象的位置。百分比和元素字体大小有关。虽然使用长度是允许的,但因为它们处理不同的显示分辨率有不可避免的缺点,所以不被推荐。
当使用百分比或长度时,需首先指定横向位置,接着是纵向位置。一个值,例如 20% 65%,指定图象的左起20%上起65%的那点会被放在元素的左起20%上起65%的那点的所在位置。一个值如5px 10px,指定图象的左上角会被放在元素的左起5像素上起10像素的位置。
如果仅给出横向的值,纵向位置的值为50%。长度和百分比的组合是允许的,负值也行。例如,10% -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%
如果背景图象被看作油画般固定不动,关于油画的图象会代替元素被放置。
网页制作者也可以使用略写的背景属性,通常会比背景位置属性获得更好的支持。
● 5.滚动或固定背景 (background-attachment)
缺省情况下,所添加的背景总是附着(attach)在文档文本或其它内容上。这样,当文档滚动时,背景也随之滚动。
在 Microsoft 公司(使用专门的BODY单元属性)引入非滚动背景之前,上述情形为大多数浏览器的缺省行为。非滚动背景没有附着在单元内容上。这样,当文档滚动时,背景固定不动,文档内容在背景上滚动。
CSS使用 background-attachment 特性来定义背景如何附着在单元内容上。缺省值 scroll 使背景附着在单元内容上,这样背景将和文本一起滚动。相反,值 fixed 使背景和单元内容分开,文本内容滚动,而背景固定不动。这 目前仅有的两种取值。
请注意:并非所有的浏览器都支持值 fixed ,即使支持,也可能只用于 BODY 单元。
● 6.简写的背景特性 (background)
简写特性 background 可在一句样式表声明中指定上述五个背景特性值。它的值是五个背景特性值的其中几个的随意组合。当一个值未被指定时,将接受其初始值。