css sprites，是一種網頁應用處理方式：將乙個頁面涉及到的零星都包含到一張大圖中去。這樣一來，當訪問該頁面時，客戶端只需要向伺服器請求少量的，越多請求次數越少，造成延遲的可能性也就越小，能有效減輕伺服器的壓力。
css sprites其實就是把網頁中一些背景整合到一張檔案中，再利用css的「background-image」、「background-position」的組合進行背景定位，用數字精確地定位出背景的位置。（如果還沒有完全掌握css背景定位，請參閱《css背景 background屬性全解析》。）
利用css sprites能減少網頁的http請求，從而大大減輕了伺服器的負擔，這是css sprites最大的優點，也是其被廣泛傳播和應用的主要原因。由於3張合併成1張的位元組總是小於這3張的位元組總和，css sprites也減少了的位元組，對頻寬的要求也相應的減少。而只對一張修改、命名也比對每個小元素進行修改、命名方便很多，從而提高了製作和維護效率。
下面通過乙個很簡單的例項讓你更好得理解什麼是css sprites，以及我們要怎樣運用它：
以最常見的為上、下頁鏈結新增按鈕樣式為例。通常我們會把按鈕儲存成兩個單獨的檔案，再通過左、右兩個鏈結的background屬性呼叫它們。而css sprites就是把這兩張小圖整合到一張大圖上，通過background-position屬性來控制左、右兩個鏈結的背景顯示。
通過以下**就實現了我們想要的效果：(檢視演示頁面)
/* css */
a a.left
a.right
/* html */
***10個高階攝影構圖技巧
54173原創：輕鬆製作cs1.6個性噴圖
相信你現在對css sprites以及它的原理、用法都有了初步的認識吧。製作css sprites是個細活，尤其是有非常多的小圖需要整合的頁面，工作量會比較大。我們在做之前就要仔細考慮它們的布局問題，這樣才能少走彎路。比如上面的例子中兩個藍色的按鈕需要在網頁中的同一排顯示，在做的時候我們就不能把它們放在同一水平線上，以免它出現在不該出現的位置擾亂頁面。
在調整乙個小的位置時，要考慮到它的左、右多少畫素範圍內不能出現別的，還有它所在的行，上、下多少畫素範圍是安全距離？做圖時要多測量、多測試、不怕繁瑣，這樣才能做出體積小巧、布局合理的優質。精工出細活！
為什麼用css sprites
在分析各個 的css時，我們經常可以看到一些 有很多的元素共享了一張背景，而這張背景包含了所有這些元素需要的背景，這種技術就叫做css sprites。例如 的css sprites url是 這樣做有什麼好處呢？顯而易見，瀏覽器在載入每一張的時候都會發起乙個http請求。如果使用css sprit...
詳解什麼是redis
企業中redis是必備的效能優化中介軟體，也是常見面試題，首先redis是由義大利人salvatore sanfilippo 網名 antirez 開發的一款記憶體快取記憶體資料庫。redis全稱為 remote dictionary server 遠端資料服務 該軟體使用c語言編寫，redis是乙...
webpack詳解，什麼是webpack
1.理解什麼是webpack 上網搜尋的直接解釋是 模組化打包機 或者 模組打包工具。首先，認為它是乙個工具，幫助我們更好的處理事情的。其次，打包 如何理解？假設我們需要寄快遞。我們將許多的物品都放進了乙個紙皮箱，然後進行封箱。這就是打包。對應到前端開發來說，就是將很多的的 css檔案，js檔案，等...