Css Sprite使用方法

Css Sprite使用方法： 1、將用到的背景圖片壓縮為zip格式的壓縮包 2、用Css圖片拼合生成器將其拼合成一張圖片，然後下載該圖片 3、拼合完成後會生成相應的Css規則，該文件定位了每個圖片的位置及圖片的寬度和高度 4、在Css樣式中定位背景圖片，例如：
html代碼：

ul.share li{float:left;}
ul.share li a{display:block;width:25px;height:25px;text-indent:-9999px;}
a.renren{background:url(../images/share.gif) 0 0 no-repeat;}
a.kaixin{background:url(../images/share.gif) -25px 0 no-repeat;}
a.sina{background:url(../images/share.gif) -50px 0 no-repeat;}
a.douban{background:url(../images/share.gif) -75px 0 no-repeat;}




a.googleBM{background:url(../images/share.gif) -100px 0 no-repeat;} 

  Css代碼：

<ul class="share">
<li>分享到：</li>
<li><a class="renren" href="/cuiying_2007/blog/ " title="">人人網</a></li>
<li><a class="kaixin" href="/cuiying_2007/blog/ " title="">開心網</a></li>




<li><a class="sina" href="/cuiying_2007/blog/ " title="">新浪微博</a></li>
<li><a class="douban" href="/cuiying_2007/blog/ " title="">豆瓣</a></li>
<li><a class="googleBM" href="/cuiying_2007/blog/ " title="">穀歌書簽</a></li>
</ul>

注： background第一個數字：X軸的偏移量 background第二個數字：Y軸的偏移量 上述兩個偏移量就是用圖片拼合生成器拼合圖片時生成的Css規則中的偏移量 5、需要repeat的圖片也有可能不適合放在sprite中，當然如果只是單向的repeat，如：repeat-x 或repeat-y，只要保證圖片在該方向鋪滿就可以了，但是如果sprite很大，會消耗較多 的內存，或者需要橫向和縱向同時平鋪的圖片，也都不適合放在sprite中