1.在前面一节中我们提到了color的使用，类似于前景色，我们同样可以为元素的背景声明颜色，可以使用background-color属性，
它接受任何有效的颜色值。先看看它的语法。
background-color
允许值 <颜色> | transparent
初始值 transparent
可否继承 否
适用于 所有元素
2.背景指的是内容框（content）和补白（padding），总是位于前景的后面，所以，社么金明的背景色会同时应用于内容框和补白，当然，
css3中增加了可以控制背景色的渲染位置，在css3属性解密中再提。如果你的网页需要一个灰色的背景色，只需要
body{background-color:gray;}这样就得到你要的效果。通常在网页设计中会同时设置前景色和背景色的，至于如何搭配，看UI的心情。
如果背景色满足不了我们的项目需求，那就的使用下面的background-image了。
background-image
允许值 <url> | none
初始值 none
可否继承 否
适用于 所有元素
缺省值none表示：没有图像放置于背景上，想要获得背景图像，只需要给出一个URL值即可：
body{background-image:url(bg123.gif);}
由于其他背景属性都取缺省值，这使得图像bg123平铺与文档的背景，效果图如下：
背景图像可以用于任何元素，不论是块级元素，还是内联元素。
3.既然能在背景上使用图片来实现复杂的展示效果，但是我们能控制背景图的位置，可否平铺等啊，这就需要使用background-position了。
background-repeat
允许值 repeat | repeat-x | repeat-y | no-repeat
初始值 no-repeat
可否继承 否
适用于 所有元素
repeat使图像在两个方向平铺，就像前面的背景图像那样，repeat-x和repeat-y使图像分别在水平和垂直方向上平铺，no-repeat禁止图像在任何方向上平铺。
来看一组效果图吧，这样一目了然。
这是背景平铺的一组效果图。
background-position
允许值 [百分比] | <长度> | [top | center |bottom] | [left| center| right]
初始值 0% 0%
可否继承 否
适用于 块级元素和替换元素
注意：百分比是相对于元素和初始图像上的一个点的值。
关于关键字left，center，right的用法其实很直观，就是背景图相对于应用元素的水平方向和垂直方向。如
body{background-image:url(bg123.gif);background-repeat:no-repeat;background-position:top right;}
这样就得到一个非平铺的位于body的右上方。
如果只有一个关键字，缺省的关键字为center。
body{background-image:url(bg123.gif);background-repeat:no-repeat;background-position:right;}
背景图是靠右垂直居中的。
百分比值对齐
这里解析的原理与关键字值有点不同，使用百分比值是同时应用于元素的及其背景图像。举个例子吧
body{background-image:url(bg123.gif);background-repeat:no-repeat;background-position:33% 66%;}
这里的背景图会横跨body的三分之一，纵跨body的三分之二。而不是水平移动33%，垂直方向上移动66%，换句话说，
图像上相对于左上角水平为三分之一、垂直为三分之二的那个点与元素中同样的点重合。
这里需要注意的是，使用百分比值是有顺序。水平方向在前，垂直方向在后。
长度值对齐
长度值被用于背景图位置时，它们被解释为相对于元素的左上角的偏移量，背景图像上的偏移点也是左上角。所以长度值就很直观，
body{background-image:url(bg123.gif);background-repeat:no-repeat;background-position:20px 50px;}
背景图左上角相对于元素的左上角水平偏移20px，垂直方向上偏移30px。
关于背景图位置属性的使用，还是需要大家多尝试的，熟能生巧哦，需要注意的是关键字是不能和百分比、长度值混用的，百分比和长度值可以混用。
好困啊，洗洗睡了！