CSS雪碧圖現學現作

一，首先來了解一下什麼是CSS雪碧圖

• 來看這樣的一個網頁

你會發現這裏面有許多的圖片，可是是否真的有這個多張圖片呢？ 答案是否認的，整個網頁的圖片其實只有這樣的一張

• 這是怎麼辦到的呢？ 答案就是，使用CSS雪碧圖，也就是多張圖片合成爲一張圖片，而後經過位置的偏移使其與頁面元素接合在一塊兒所製成的

• 使用雪碧圖的好處是什麼？ 1.由於多圖合成爲了一張圖，因此減小了網頁圖片的請求，加快了網頁的加載速度； 2.能夠重複使用；

---

二，現學現作CSS雪碧圖，讓咱們來一步步實現相似下面圖片這樣的效果吧

1.首先，咱們須要一些小圖片，能夠在阿里巴巴的iconfont裏面下載到這些圖片

2.下載完畢後打開下載的文件能夠看到這些圖片，爲了後面的方便我將他們命名爲了1，2，3，4，5，6

3.而後網上搜索一下雪碧圖合成網站，我的推薦雪碧圖合成，使用方式以下圖：

4.添加完畢點擊建立後，出現下圖，點擊下載png格式圖片就出現這個合成圖的網絡鏈接了，這樣的一張多小圖合成的大圖就是一張雪碧圖

5.建立html文件，並寫入一個列表代碼，爲了方便後面的設置，我添加了class選擇器；

6.複製前面咱們獲得的雪碧圖網址url，添加進每個列表li元素中，並設置其不重複以及它的尺寸爲你想要的尺寸，順便去掉列表的默認樣式，獲得下面這樣的圖；

7.設置li元素的文本格式以及寬高等樣式，而後添加邊框，獲得以下圖：

8.最後一步，使用前面添加的class選擇器對每一個li元素單獨設置背景雪碧圖所要顯示的偏移位置，例如，第三個li元素顯示是便便的圖，就這樣設置：

PS：設置不許偏移量的能夠在開發者工具中慢慢調整；

9.最終效果圖顯示以及代碼一覽：