CSS sprite是什么

今天就跟大家聊聊有關(guān)CSS sprite，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

CSSSprites在國內(nèi)很多人叫css精靈，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來了。對于當(dāng)前網(wǎng)絡(luò)流行的速度而言，不高于200KB的單張圖片的所需載入時(shí)間基本是差不多的，所以無需顧忌這個(gè)問題。

加速的關(guān)鍵，不是降低重量，而是減少個(gè)數(shù)。傳統(tǒng)切圖講究精細(xì)，圖片規(guī)格越小越好，重量越小越好，其實(shí)規(guī)格大小無所謂，計(jì)算機(jī)統(tǒng)一都按byte計(jì)算。客戶端每顯示一張圖片都會(huì)向服務(wù)器發(fā)送請求。所以，圖片越多請求次數(shù)越多，造成延遲的可能性也就越大。

原理：

CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。

1、CSSSprites在國內(nèi)很多人叫css精靈，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來了。下面我給出了一個(gè)概念圖，你可以參考一下。說到底還就是通過某些手段把許多小圖片給塞入一張大圖中，這樣做的好處就是在加載網(wǎng)頁的時(shí)候就只需要加載一次——就是咱們上面說的大圖。

2、手段：運(yùn)用了css中的background-position,這是css中的一個(gè)屬性。意思是調(diào)整css盒子中的背景圖片的位置.

3、代碼示例：.d1{background-position:0px 0px;}

此代碼意思是id名為test1的背景圖片的位置為坐標(biāo)原點(diǎn)的0位置，即默認(rèn)位置

d2{background-position:50px 50px;}

此代碼的意思是id名為test2的背景圖片的位置為原點(diǎn)位置（默認(rèn)位置）的上下左右位置的50像素距離處。

4、關(guān)于代碼和屬性的解釋可以參考“css手冊”。

看完上述內(nèi)容，你們對CSS sprite有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。