小編給大家分享一下css精靈圖技術(shù)sprite是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
css精靈技術(shù)是將很多的小圖片合并到一張較大的圖片里，所以在首次加載頁面的時候，就不用加載過多的小圖片，只需要加載出來將小圖片合并起來的那一張大圖片即可，這樣可在一定程度上提高了頁面的加載速度，緩解服務(wù)器的壓力，節(jié)約服務(wù)器的流量。
css精靈圖技術(shù)（sprite）是什么？
css精靈圖技術(shù)（sprite）直譯為“CSS精靈”，也被稱為通常被解釋為“CSS圖像拼合”、“CSS貼圖定位”或“CSS圖片精靈”、“CSS雪碧圖”，是一種網(wǎng)頁圖片應(yīng)用處理方式。
其實就是把一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
精靈圖技術(shù)產(chǎn)生的原因：
很多大型網(wǎng)頁在首次加載的時候都需要加載很多的小圖片，而考慮到在同一時間，服務(wù)器擁堵的情況下，為了解決這一問題，采用了精靈圖這一技術(shù)來緩解加載時間過長從而影響用戶體驗的這個問題。
css精靈圖技術(shù)的作用
所謂精靈圖就是把很多的小圖片合并到一張較大的圖片里，所以在首次加載頁面的時候，就不用加載過多的小圖片，只需要加載出來將小圖片合并起來的那一張大圖片也就是精靈圖即可，這樣在一定程度上減少了頁面的加載速度，也一定程度上緩解了服務(wù)器的壓力。
1、減少加載網(wǎng)頁圖片時對服務(wù)器的請求次數(shù)
可以合并多數(shù)背景圖片和小圖標(biāo)，方便在任何位置使用，這樣不同位置的請求只需要調(diào)用一個圖片，從而減少對服務(wù)器的請求次數(shù)，降低服務(wù)器壓力，同時提高了頁面的加載速度，節(jié)約服務(wù)器的流量。
2、提高頁面的加載速度
sprite 技術(shù)的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小于所有圖片拼合前的大小。
單張的 GIF 只有相關(guān)的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非?？赡鼙劝岩粡垐D分成多張得來的圖片總尺寸小。
3、減少鼠標(biāo)滑過的一些bug
IE6不會主動預(yù)加載鼠標(biāo)滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標(biāo)滑過會出現(xiàn)閃白的現(xiàn)象。使用CSS雪碧，由于一張圖片即可，所以不會出現(xiàn)這種現(xiàn)象。
css精靈技術(shù)的使用方法
css精靈圖（sprite）其實就是通過將多個圖片融合到一張圖片文件中，使用CSS background和background-position屬性渲染，這也就意味著你的標(biāo)簽變得更加復(fù)雜了，圖片是在CSS中定義，而非標(biāo)簽。
在需要用到圖片的時候，現(xiàn)階段是通過CSS屬性background-image組合background-repeat, background-position等來實現(xiàn)圖片的顯示。
示例：
例如這是一張大的精靈圖，我們現(xiàn)在用它來拼出我們想要的字母，例如ANDY
重慶分公司
重慶分公司
Document
最終效果：
其實說白了就是將精靈圖設(shè)為一個大背景，然后通過background-position來移動背景圖，從而顯示出我們想要顯示出來的部分。
精靈圖雖然實現(xiàn)了緩解服務(wù)器壓力以及用戶體驗等問題，但還是有一個很大的不足，那就是牽一發(fā)而動全身。這些圖片的背景都是我們詳細(xì)測量而得出來的，如果需要改動頁面，將會是很麻煩的一項工作。。。
以上是css精靈圖技術(shù)sprite是什么的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
