css中精靈圖是什么意思？有什么用？下面本篇文章就來給大家介紹一下CSS 精靈圖。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

css中精靈圖是什么意思？

css精靈圖(sprite)直譯為“CSS精靈”，也被稱為通常被解釋為“CSS圖像拼合”、“CSS貼圖定位”或“CSS圖片精靈”、“CSS雪碧圖”，是一種網(wǎng)頁圖片應(yīng)用處理方式。

其實(shí)就是把一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。

怎么使用css精靈圖(sprite)？

css精靈圖(sprite)其實(shí)就是通過將多個圖片融合到一張圖片文件中，使用CSS background和background-position屬性渲染，這也就意味著你的標(biāo)簽變得更加復(fù)雜了，圖片是在CSS中定義，而非標(biāo)簽。

在需要用到圖片的時候，現(xiàn)階段是通過CSS屬性background-image組合background-repeat, background-position等來實(shí)現(xiàn)圖片的顯示。

使用精靈圖的優(yōu)點(diǎn)

1、減少加載網(wǎng)頁圖片時對服務(wù)器的請求次數(shù)

可以合并多數(shù)背景圖片和小圖標(biāo)，方便在任何位置使用，這樣不同位置的請求只需要調(diào)用一個圖片，從而減少對服務(wù)器的請求次數(shù)，降低服務(wù)器壓力，同時提高了頁面的加載速度，節(jié)約服務(wù)器的流量。

2、提高頁面的加載速度

sprite 技術(shù)的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小于所有圖片拼合前的大小。

單張的 GIF 只有相關(guān)的一個色表，而單獨(dú)分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨(dú)的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。

3、減少鼠標(biāo)滑過的一些bug

IE6不會主動預(yù)加載鼠標(biāo)滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標(biāo)滑過會出現(xiàn)閃白的現(xiàn)象。使用CSS雪碧，由于一張圖片即可，所以不會出現(xiàn)這種現(xiàn)象。

更多前端開發(fā)知識，請查閱 HTML中文網(wǎng) ！！

總結(jié)

以上是生活随笔為你收集整理的html中精灵图片路径,css中精灵图是什么意思？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。