css sprite 雪碧圖

1、什麼是雪碧圖？

一、咱們先來看一下淘寶上面用到的雪碧圖實例：

a、前端展現

          

b、css雪碧圖爲

                                                         

二、概念

CSS sprite在國內不少人叫css精靈，是一種網頁圖片應用處理方式。它容許你將一個頁面涉及到的全部零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像之前那樣一幅一幅地慢慢顯示出來了。

三、何時用到雪碧圖？

a、靜態圖片，不隨用戶信息的辯護而變化

b、小圖片，圖片容量比較小

c、加載量比較大

四、工具介紹

　　剛剛下載了一個比較實用的雪碧圖工具Css Sprite Tools(CST CSS圖片拼合定位工具) 1.0(方便本身下載)

五、工具使用步驟

①、用ps把小圖片切好

②、打開軟件

③、打開圖片

點擊左上角的「選擇多幅小背景圖片」，選擇多張圖片，點擊打開

④、排布圖片

能夠選擇上面的最上面按鈕今天橫豎的默認排布，也能夠鼠標選中圖片拖動位置，拖動完成後程序會根據內部圖片的位置生成面積最小的雪碧圖，固然也會改變相應的圖片位置

我是本身排的

⑤、代碼生成

點擊「選擇目錄並生成測試文件」按鈕

點擊肯定

⑥、保存雪碧圖

⑦、前端展現

⑧、材料

所須要的代碼就在css/bgs.css文件裏面

所須要的圖片在imgs裏

 

 

 

 堅持把每個小知識點弄明白、完全！！！