sprite什么意思(CSS sprite是什么)

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

加速的關鍵,不是降低重量,而是減少個數。傳統切圖講究精細,圖片規格越小越好,重量越小越好,其實規格大小無所謂,計算機統一都按byte計算?？蛻舳嗣匡@示一張圖片都會向服務器發送請求。所以,圖片越多請求次數越多,造成延遲的可能性也就越大。

原理:

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的組合進行背景定位,background-position可以用數字能精確的定位出背景圖片的位置。

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

2、手段:運用了css中的background-position,這是css中的一個屬性。意思是調整css盒子中的背景圖片的位置.

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

此代碼意思是id名為test1的背景圖片的位置為坐標原點的0位置,即默認位置

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

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

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

看完上述內容,你們對CSS sprite有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注本站行業資訊頻道,感謝大家的支持。