打印本文 打印本文 关闭窗口 关闭窗口
CSS颜色和背景属性
作者:武汉SEO闵涛  文章来源:敏韬网  点击数589  更新时间:2009/4/23 13:47:33  文章录入:mintao  责任编辑:mintao

在讲述字体属性时就已经提到过,一个文档的字体和颜色都能够直接对文档的外观产生很大的影响,因此,颜色的背景属性也是我们需要详细研究和说明的。 
  在 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%”;等等。


打印本文 打印本文 关闭窗口 关闭窗口