1、 精靈圖

為什么需要精靈圖

精靈圖的使用

精靈圖的案例

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

1.2精靈圖的使用（原理）
使用精靈圖核心：
1.精靈技術(shù)主要針對(duì)背景圖片使用，就是把多個(gè)小背景整合到一張大圖中
2.這個(gè)大的圖片我們稱為sprites精靈圖
3.移動(dòng)背景位置，此時(shí)可以用background-position
4.移動(dòng)的距離就是這個(gè)目標(biāo)圖片的X和Y坐標(biāo)，注意網(wǎng)頁中的坐標(biāo)有所不同
向右是X軸、向下是Y軸。
5.因?yàn)橐话闱闆r下都是往上往左移動(dòng)，所以是負(fù)值。

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

3.創(chuàng)建盒子導(dǎo)入圖片

圖片默認(rèn)顯示的是左上角，這個(gè)使用我們要去位移它


這樣對(duì)應(yīng)的圖標(biāo)就展示出來了

總結(jié)：利用background-position來進(jìn)行圖片的定位，因?yàn)閳D片基本上是像左或者像上的所以值2都是為負(fù)值，以此類推大概就知道精靈圖的使用了吧！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。