CSS中背景图片的应用

        最近发现 谷歌中国的首页变了个小花样，有渐变的动画效果，看起来还蛮好看的。开始以为是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%的点对齐，其中坐标系采用页面的标准坐标，即右上角为原点、水平向右为横坐标的正值，垂直向下为纵坐标的正值。

下面给出一个背景图片的例子，该例子实现了一个页编号的显示,借鉴网站 Deziner Folio

1 2 3 4

 

  < 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 >

 

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>