最近发现谷歌中国的首页变了个小花样，有渐变的动画效果，看起来还蛮好看的。开始以为是flash，但是用firebug看了一下源代码，动画都是用背景图片和javasccript脚本实现的。至于js脚本好像很多，但是如果知道背景图片的应用了，动画效果就比较容易了：每个时间段换一下背景图片。最开始以为是很多小图片拼成的，结果是一张大的背景图片。原来对CSS中的background没有仔细看，后来才知道background的强大。

backgournd的语法如下：

background : background-color || background-image || background-repeat || background-attachment || background-position 

background-color ：表示背景颜色。如#333。
background-image ：表示背景图片。如url(test.gif)。
background-repeat ：表示背景图片是否重复。值有repeat | no-repeat | repeat-x | repeat-y。分别表示背景图像在纵向和横向上平铺、背景图像不平铺、背景图像在横向上平铺、背景图像在纵向平铺。
background-attachment ：值有scroll和fixed。scroll : 背景图像是随对象内容滚动。fixed : 　背景图像固定。 background-position：背景图片放置的位置。[ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] ||[left | center | right] ] ] | inherit。默认值为：(0% 0%)。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

其中难以理解的就是background-position。采用百分比的时候，如果有 ’0% 0%’,则表示将背景图片的左上角与所属box的左上角对齐，不考虑padding的影响。’100% 100%’ 则将背景图片的右下角和所属容器的右下角对齐。对于’14% 84%’, 则有将背景图片中横坐标为14%、纵坐标为84%的点与所属容器中的14%、纵坐标为84%的点对齐，其中坐标系采用页面的标准坐标，即右上角为原点、水平向右为横坐标的正值，垂直向下为纵坐标的正值。 

 <style>
    #cont{}{
        background-color:#fff;
    }
    #cont a{}{
        background:transparent url(page_num.gif) no-repeat scroll 0pt 0pt;
        color:#333333;
        display:block;
        float:left;
        height:42px;
        margin:0pt 5px;
        padding-top:6px;
        text-align:center;
        width:37px;
    }
    #cont a:hover, #cont .current{}{
        background:transparent url(’’page_num.gif’’) no-repeat scroll 0pt 100%;
        color:#FFF;
    }
  </style>
<div id="cont">
<a class="current">1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</div>