CSS精靈圖的完整指南

一、什麼是CSS精靈圖?

CSS精靈圖是一種通過將一個大圖拆分為若干個小圖標或者小圖片，通過CSS樣式的背景圖層疊來任意控制背景圖片顯示區域，以減少HTTP請求的一種技術手段。

要點：

1. 減少HTTP請求
2. 多個小圖片合併為一個整圖
3. 使用CSS背景圖層疊控制顯示區域

.sprite {
    background: url(images/sprite.png) no-repeat;
}
.logo {
    background-position: -2px -458px;
    width: 196px;
    height: 56px;
}
.cart {
    background-position: -95px -398px;
    width: 32px;
    height: 33px;
}

二、 CSS精靈圖的優點

CSS精靈圖在前端開發中的使用有很多優點:

1. 減少HTTP請求數：從而減小伺服器負擔、縮短前端頁面的載入時間。
2. 加快頁面的渲染速度：
(1). 減少了HTTP請求，從而減少了網路請求帶來的延遲時間。
(2). 減少頁面資源的請求次數，從而減小了TCP慢啟動的開銷，減少握手帶來的時間和資源消耗。
3. 簡化CSS樣式的設定：因為可以自由定點陣圖標在整張圖片的任意位置，所以在設定樣式的時候沒有了對多張圖片樣式定位的麻煩，而且也更加靈活，方便調整，提高開發效率。
4. 減少了圖片的文件大小：因為可以把多張小圖片合併成一張，減小了總文件需要的空間大小，從而減小了頁面的整體體積。也因為減小了圖片所佔據的空間，頁面出現滾動條的機會也更小了。

三、 CSS精靈圖的缺點

CSS精靈圖還有以下缺點:

1. 難以維護：由於如果要更改其中一張圖片需要重新生成整張CSS精靈圖，並且修改相關CSS代碼，如果沒有好的命名規範和管理體系，操作會非常不兼容及困難。
2. 無法在內聯樣式中使用背景：CSS精靈圖只能在CSS中使用，而無法在內聯樣式中使用，因為內聯樣式必須用到html標籤的style屬性，而style屬性無法識別CSS的背景屬性。
3. 要求每個圖標的大小和位置一致：如果圖片的大小或者位置不同，那麼在CSS精靈圖中樣式的設定會相當的困難，即使設定成功，效果也十分的不美觀。
4. 無法利用瀏覽器的緩存：每次請求CSS精靈圖都會將整張圖片重新拉取回來，不利於重複使用和利用瀏覽器的緩存。但注意，如果精靈圖中的圖片有改動，由於整張圖片變更而導致css精靈圖的緩存失效，即使沒有改動到具體的圖片，還是會重新載入。

四、如何使用CSS精靈圖

CSS精靈圖的使用步驟如下：

1. 準備好需要的小圖片。注意要求每個圖標的大小和位置一致，可以使用工具如Photoshop等。
2. 將所有小圖片合併為一份整圖，命名為sprite.png，並保留一個生成的樣式表sprite.css。
3. 編寫樣式,將小圖標中需要的部分引入樣式。
(1). 設定精靈圖片整體樣式。
(2). 設定小圖標在精靈圖片中的位置和大小、背景顏色或狀況等。

五、如何創建CSS精靈圖

下面介紹3種主要的Sprite生成技術：

1. 手動製作增量式或全量式樣式表。
製作方法：
(1) 設計圖中需要連續的小圖標固定在同一行；
(2) 設置橫截面的行數；
(3) 通過計算和工具來劃分小圖標的大小以及注意它們的間距；
(4) 手寫CSS樣式。
適用場景：
多了不必要的佔用生產力時間而少用。
2. 使用Sprites Generator工具：可以自動化製作相關的樣式表就不用再手寫CSS。
此技術生成的樣式表可能會很膨脹。
3. 使用Compass、SASS、LESS預處理器做Sprites製作。

@mixin sprite($icon-sprite) {
    background-position: $icon-sprite * -60px;
    background-image: url(/path/to/sprite.png);
    width: 50px;
    height: 50px;
}
.element {
    @include sprite(2); //調用第二個位置的小圖標
}

六、CSS精靈圖的應用場景

CSS精靈圖簡化了對網頁和應用程序的Web設計過程，特別是節省了Web格式的Excel圖標的寶貴時間。
精靈圖特別適合於變化不大的網頁和應用程序，比如：

1. 網站Logo
2. 社交網路圖標
3. 動態標誌按鈕
4. Twitter、Facebook上的分享按鈕
5. 表情符號
6. HTML5 Video播放器的控制按鈕
7. 4G、wifi、雲、熱點等信號圖標等等。

七、總結

通過本文的闡述，我們了解了什麼是CSS精靈圖，它的優點和缺點，以及它的應用場景和如何使用， 掌握了製作技術和常用的工具。在實際工作中，我們需要在多方面考慮，對於多張小圖片，我們需要明確是否需要組成一個精靈圖，是否需要完全合併圖片組成一個精靈圖和選擇合適的工具等方面考慮， 最終提高前端開發的效率，加快頁面的渲染速度，提升用戶體驗。