首頁  >  文章  >  web前端  >  CSS sprite是什麼

CSS sprite是什麼

hzc
hzc原創
2020-06-24 15:12:193901瀏覽

CSS Sprites在國內很多人叫css精靈,是一種網頁圖片應用處理方式,它允許將一個頁麵涉及到的所有零星圖片都包含到一張大圖中去,這樣一來,當造訪該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。

CSS sprite是什麼

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是什麼

推薦教學:《

HTML教學

以上是CSS sprite是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn