CSS中强大的background属性

background属性是CSS中非常重要的属性，它是一个复合属性，主要包括 background-color || background-image || background-repeat || background-attachment || background-position  通过该属性对文字背景色的设置,可以使画面发生奇妙的效果,很多看似乎复杂的页面,其实图片只有1-2个,但是展示给用户确实10多个图片。这是如何做到的呢？

主要是通过background-position属性的精确设置来完成的,关于background-position的属性的语法如下

 
语法：
 
background-position : length || length
background-position : position || position
 
参数：
 
length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : 　top | center | bottom | left | center | right
 
说明：
 
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
该属性定位不受对象的补丁属性(padding)设置影响。
对应的脚本特性为backgroundPosition。请参阅我编写的其他书目。
 
示例：
 
div { background: url("images/aardvark.gif"); background-position: 35% 80%; }
menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; }
a { background: url("images/aardvark.gif"); background-position: 3.25in; }
body { background: url("images/aardvark.gif"); background-position: top right; }

通过设置background-position属性,我们可以将某个block块的背景设置为指定图片的某一部分显示。正因如此可以将一个网页上许多重复使用的小图片，集中到一个图片中,这样的好处是管理方便,而且可以重复使用，另外通过这个属性的设置，还能达成一些很棒的效果。

在CSS在线  的 《用CSS制作动感的button》  也是通过使用该属性达成Flash一样的按钮效果,而且整个页面可以有不同长度的按钮,却只用了一张背景图，有兴趣可以去看看.