Tag Archives: CSS Sprites

第一次遇見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 文字比較多，自己選擇看