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

#cont{background-color:#fff;}#cont a{background:transparent url(http://p.blog.csdn.net/images/p_blog_csdn_net/llmlx/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(http://p.blog.csdn.net/images/p_blog_csdn_net/llmlx/page_num.gif) no-repeat scroll 0pt 100%;color:#FFF;}

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"><!--google_ad_client = "pub-1992382271196226";/* 728x90, 创建于 08-3-9 */google_ad_slot = "1653402536";google_ad_width = 728;google_ad_height = 90;//--></script> <script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>