第一次遇見CSS Sprites是在facebook,當時想模仿facebook的風格,但分析了它的css後,發現了一樣東西,就是facebook 的很多icon都在同一個檔案裡面。
例如:http://static.ak.fbcdn.net/rsrc.php/zCVPK/hash/95o21x7p.png
這種方法就叫css sprites, facebook是一個超級超級多人用的平台,因此它的流量相當厲害,就算是小小的圖片,但是有接近幾億人用,那麽小圖片就變了大圖片了,再者,單一圖片可以減少對服務器的訪問次數,上圖那裡面有6個icon,現在只訪問一次,相對訪問六次,工作輕鬆多了,其實記得之前facebook一張圖片是包含所有icon的,可能優化後改善了。
主要用法是在background那進行定位(我覺得很辛苦),網上也見到很多人分享經驗,例如把圖片像facebook那樣,豎直排起來,然後只要加減高度就可以,還有就是把相同顏色的圖片放在一起,可以減少圖片的大小,當然不要用photoshop進行另存檔案,用其他工具會比較小,例如firework,這些技巧以後用時在慢慢體會
用法:background: transparent url(test-3.jpg) -96px -200px no-repeat;
這裡介紹一篇文章:http://www.alistapart.com/articles/sprites
文字比較多,自己選擇看