CSS Sprite（CSS貼圖）

吐槽：oschina的markdown怎麼這麼醜？

咱們常常看到這樣的CSS描述：

.demo {
    background-image: url('img/demo.png');
}

.demo-a {
    background-position: 0 -10px;
}

.demo-b {
    background-position: -48px -10px;
}

其中的demo.png就是將多個小圖像整合到一塊兒的圖片，目的是減小對資源請求次數。

那麼怎麼整和呢，除了圖片處理的軟件，這裏推薦幾個在線的工具：

• SpritePad：在線製做貼圖（自動對齊功能須要註冊收費）

SpritePad

拖動須要整合的圖片到指定窗口，嗯……直接看效果圖吧（但願愛奇藝能原諒我從其APK裏借用的圖標— —||）

搞定以後，最好先FitDocument一下，剪裁無用區域，而後點擊Download就會下載整合後的圖片和CSS文件。

• SpriteMe：瀏覽器書籤式操做，打開指定的頁面，運行收藏的SpriteMe書籤，自動抓取頁面圖片資源並整合

SpriteMe

具體操做參考其網站說明，比較簡單。

• SpriteCow：有貼圖可是不肯定定位參數

SpriteCow

框選想要定位的圖片，頁面底部會自動計算位置和寬高，比較很差的就是它選擇的圖片內容的邊緣，沒有緩衝留白，感受對圖標類型的也不實用。

對於須要常常變更的圖片就不要費心整合到一張圖裏了