日期:2014-04-26  浏览次数:20659 次


  在讲述字体属性时就已经提到过,一个文档的字体和颜色都能够直接对文档的外观产生很大的影响,因此,颜色的背景属性也是我们需要详细研究和说明的。
   在 CSS 属性中,通常 color 特指前景的颜色,而 background 可以是背景颜色或者是背景图案。在定义背景图案时,我们可以指定该图片的确切位置、是否重复显示,以及它是否被固定或随页面上的内容滚动。
color
属性值:<color>
初始值:由 UA 默认值制定
适用于:所有元素
继承:是
百分比值:不适用
   该属性描述了一个元素中文本的颜色,也叫做前景色。如果要把文本设为红色,下面是两种方法。EM{color:red}/*使用普通的关键字来定义,这些关键字可以被我们读懂*/EM{color:rgb(255,0,0)}/*使用 RGB 值来定义,每个 RGB 值从0到255*/

background-color
属性值:<color> | transparent
初始值:transparent
适用于:所有元素
继承:是
百分比值:不适用
“background-color”设置了元素的背景色。

background-image
属性值:<url> | none
初始值:none
适用于:所有元素
继承:否
百分比值:不适用
   这个元素设定了一个元素的背景图案。需要注意的是在设置背景图案时,对于背景色必须一同设置。因为有时这些图案会因为某些原因不可用,此时可以用背景色代替,而且背景色的颜色要与背景图案颜色相似。

background-repeat
属性值:repeat | repeat-x | repeat-y | no-repeat
初始值:repeat
适用于:所有元素
继承:否
百分比值:不适用
在背景图案设置的情况下,设置“background-repeat”可以决定图案是否重复显示或者以怎样的方式重复。
如果属性值是“repeat”,那就意味着图片在水平和垂直方向上都重复排列。
如果属性值是“repeat-x”,表示水平重复排列。
如果属性值是“repeat-y”,表示垂直重复排列。
如果属性值是“no-repeat”,表示不重复。

background-attachment
属性值:scroll | fixed
初始值:scroll
适用于:所有元素
继承:否
百分比值:不适用
在背景图案已经设置的情况下,通常这些图案有两种依附方式:
1.一种是背景图案永远静止,文字在背景上面“滚动”;
2.另一种是背景图案随着页面上的文字一起“滚动”。

background-position
属性值:[<percentage> | <length>] {1,2} | [top | center | bottom] || [left | center | right]
初始值:0% 0%
适用于:块级和可替换元素
继承:否
百分比值:参照元素本身的尺寸
   在背景图案已经设定的情况下,background-position指定了它的初始位置。如果设定的属性值是“0% 0%”,那么意味着图片左上角与该元素的左上角重合,如果设定的属性值是“100% 100%”,那么意味着图片右下角与该元素的右下角重合,以此类推。在设定背景图片位置的时候,还可以使用关键字来定义一些特殊的位置,下面是一些关键字以及相应的尺寸:
“top left”和“left top”=“0% 0%”;
“top”、“top center”和“center top”=“50% 0%”;等等。