天助網(wǎng)旗下一站式企業(yè)建站平臺！
咨詢熱線：
0755-83466100
咨詢熱線：
0755-83466100
建站知識
Service Support
2017-02-21 15:01:01 次瀏覽
其實說起來，css sprites算不上一門什么高深的技術(shù)，應(yīng)該只能算是一種技巧吧。在mf1288.com中有關(guān)很多相關(guān)的介紹，您可以參考。
CSS Sprites工作原理及其對CSS布局的意義、優(yōu)點和缺點介紹
http://www.qiegegongcheng.com/help_show.aspx?newsid=325&newstreeid=55&newstypeid=2&trid=
淺談CSS Sprites技術(shù)以及圖片優(yōu)化
http://www.qiegegongcheng.com/help_show.aspx?newsid=326&newstreeid=55&newstypeid=2&trid=
也就是通過背景圖的定位（background-position ）把頁面中所用到的圖標(biāo)、背景圖之類的整合到一張整的背景圖里，從而大大減少了頁面請求數(shù)，提高了頁面瀏覽的性能。
其實本民工最初這樣用的時候并不知這就叫css sprites，只是看到各大主流站都是這么做于是也效仿而已。比如下面這張圖，是騰訊主站背景圖的一部分：
定位的樣式其實只用一句：
關(guān)于CSS中的坐標(biāo)，圖片的最左上角為（0,0）,而定位圖片內(nèi)部的位標(biāo)的話，x、y都是負(fù)值。還有，可以把需要repeat的跟no-repeat的圖分開，如果放在一起的話那么就需要考慮一下圖片的延展性就可以了。
實現(xiàn)css sprites并不難，只要有點耐心與細(xì)心就可以了。在制圖的時候建議用Fireworks，他可以把圖片精確定位到某個坐標(biāo)，這是PS做不到的。采用css sprites對頁面性能的提升是毋庸置疑的，只是在后期的修改與維護(hù)上麻煩了點而已，具體怎么用，可以跟據(jù)項目的具體情況來決定了。比如說，本民工的博客就沒這樣用，因為跟本就沒用到幾張圖片，嘿嘿。
