CSS的背景属性

该部分的主题是控制单元背景的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 可在一句样式表声明中指定上述五个背景特性值。它的值是五个背景特性值的其中几个的随意组合。当一个值未被指定时，将接受其初始值。