CSS背景属性Background详解.docx

CSS背景属性Background详解
本文详解了CSS的背景属性Background，包括CSS3中新增的背景属性。如果你是个CSS初学者，还可以查看之前介绍的CSS浮动属性和CSS透明属性详解。
css2中的背景（background）
CSS2中有5个主要的背景（background）属性，它们是：

background-color：指定填充背景的颜色。background-image：引用图片作为背景。background-position：指定元素背景图片的位置。background-repeat：决定是否重复背景图片。background-attachment：决定背景图是否随页面滚动。

这些属性可以全部合并为一个缩写属性：background。需要注意的一个要点是背景占据元素的所有内容区域，包括padding和border，但是不包括元素的margin。它在Firefox，Safari，Opera以及IE8中工作正常，但是IE6和IE7中，background没把border计算在内。

基本属性
背景色（background-color）

代码
background-color属性用纯色来填充背景。有许多方式指定这个颜色，以下方式都得到相同的结果。background-color：blue;background-color：rgb（0，0，255）;background-color：#0000ff;background-color也可被设置为透明（transparent），这会使得其下的元素可见。

背景图（background-image）
background-image属性允许指定一个图片展示在背景中。可以和background-color连用，因此如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。代码很简单，只需要记住，路径是相对于样式表的，因此以下的代码中，图片和样式表是在同一个目录中的。
background-image：url（image.jpg）;

但是如果图片在一个名为images的子目录中，就应该是：
background-image：url（images/image.jpg）;

背景平铺（background-repeat）
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。这也许是你需要的，但是有时会希望图片只出现一次，或者只在一个方向平铺。以下为可能的设置值和结果：

代码
background-repeat：repeat;/*默认值，在水平和垂直方向平铺*/background-repeat：no-repeat;/*不平铺。图片只展示一次。*/background-repeat：repeat-x;/*水平方向平铺（沿x轴）*/background-repeat：repeat-y;/*垂直方向平铺（沿y轴）*/background-repeat：inherit;/*继承父元素的background-repeat属性*/

背景定位（background-position）
background-position属性用来控制背景图片在元素中的位置。技巧是，实际上指定的是图片左上角相对于元素左上角的位置。

下面的例子中，设置了一个背景图片并且用background-position属性来控制它的位置，同时也设置了background-repeat为no-repeat。计量单位是像素。
第一个数字表示x轴（水平）位置，第二个是y轴（垂直）位置。

代码
/*例1：默认值*/background-position：00;/*元素的左上角*//*例2：把图片向右移动*/background-position：75px0;/*例3：把图片向左移动*/background-position：-75px0;/*例4：把图片向下移动*/background-position：0100px;

background-position属性可以用其它数值，关键词和百分比来指定，这比较有用，尤其是在元素尺寸不是用像素设置时。
关键词是不用解释的。x轴上：

*left*center*right

y轴上：

*top*center*bottom

顺序方面和使用像素值时的顺序几乎一样，首先是x轴，其次是y轴，像这样：
background-position：topright;

使用百分数时也类似。需要主要的是，使用百分数时，浏览器是以元素的百分比数值来设置图片的位置的。看例子就好理解了。假设设定如下：
background-position：100%50%;

使用百分数定位时，其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。