1、 精靈圖

為什么需要精靈圖

精靈圖的使用

精靈圖的案例

1.1為什么需要精靈圖
? ? ? ? 在平常上網過程中，打開網址就可以看到網頁了，網頁中會有許多的小圖標及圖片，會像服務器去請求某個小圖標，有多個小圖標都要一個一個的去請求過來，這樣會讓服務器的壓力過大，也大大降低頁面的加載速度，因此，為了有效減少服務器接收和發送請求的次數，提高頁面的加載速度，出現了CSS精靈技術（也稱CSS Sprites，CSS雪碧）
? ? ? ?核心原理:將網頁中的一些小背景圖像整合到一張大圖中，這樣服務器只需要一次請求就可以了

1.2精靈圖的使用（原理）
使用精靈圖核心：
1.精靈技術主要針對背景圖片使用，就是把多個小背景整合到一張大圖中
2.這個大的圖片我們稱為sprites精靈圖
3.移動背景位置，此時可以用background-position
4.移動的距離就是這個目標圖片的X和Y坐標，注意網頁中的坐標有所不同
向右是X軸、向下是Y軸。
5.因為一般情況下都是往上往左移動，所以是負值。

1.3精靈圖的使用（代碼）
1.打開PS或者FW工具，將精靈圖打開并且鎖定（防止移動位置）
2.使用切片工具選擇所需要的小圖標，ps右鍵查看切片選項，里面會存在X軸和Y軸坐標，記住

3.創建盒子導入圖片

圖片默認顯示的是左上角，這個使用我們要去位移它


這樣對應的圖標就展示出來了

總結：利用background-position來進行圖片的定位，因為圖片基本上是像左或者像上的所以值2都是為負值，以此類推大概就知道精靈圖的使用了吧！

總結

以上是生活随笔為你收集整理的CSS高级技巧——精灵图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。