解读CSS的背景（background）样式

background-color:

可以为所有的元素设置背景色，这个属性接受任意合法的颜色值，如果希望背景色从元素文本向外少有延伸，只需增加一些内边距（padding）。

注意:background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。事实上，所有背景属性都不能继承。

background-image:

background-image 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值。

background-repeat:

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

background-position:

利用background-position可以改变图像在背景中的位置，background-position的属性有很多方法，下面详细解读：

关键字：

图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是 center。

百分数值：

默认值是 0% 0%，在功能上相当于 top left，这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。如果你提供的属性值是50% 50%，这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。

长度值：

长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐，可以结合函数第四象限坐标来理解。

注意：需要把 background-attachment 属性设置为 "fixed"，才能保证position属性在 Firefox 和 Opera 中正常工作。

background-attachment：

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。

关于背景属性，你还可以使用简写属性来将所有背景属性设置在一个声明之中。举个栗子：

body{ background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;}