I.精靈圖介紹

首先，我們先介紹一下什么是精靈圖：

先強(qiáng)調(diào)一點(diǎn)哈，精靈圖和下面這個(gè)玩意兒沒啥關(guān)系：

它的名字是這么來的：

當(dāng)用戶訪問一個(gè)網(wǎng)站時(shí)，需要向服務(wù)器發(fā)送請(qǐng)求，網(wǎng)頁上的每張圖像都要經(jīng)過一次請(qǐng)求才能展現(xiàn)給用戶，然而，一個(gè)網(wǎng)頁中往往會(huì)應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁中的圖像過多時(shí)，服務(wù)器就會(huì)頻繁地接受和發(fā)送請(qǐng)求，這將大大降低頁面的加載速度。為了有效地減少服務(wù)器接受和發(fā)送請(qǐng)求的次數(shù)，提高頁面的加載速度，出現(xiàn)了CSS精靈技術(shù)（也稱 CSS Sprites、CSS雪碧）。

由于精靈圖最早誕生之初，不像位圖一樣是整張轉(zhuǎn)換數(shù)據(jù)后加載出來的，而是“懸浮”于幀緩沖中數(shù)據(jù)之上，不影響其中數(shù)據(jù)，就像幽靈或精靈一樣，因此得名精靈圖。

精靈圖要解決的是下面的這個(gè)問題：

圖中左側(cè)是一個(gè)瀏覽器，右側(cè)是一個(gè)服務(wù)器，假設(shè)我們正在使用瀏覽器，向某網(wǎng)站發(fā)起了請(qǐng)求，這個(gè)請(qǐng)求可能是請(qǐng)求訪問該網(wǎng)站的官網(wǎng)，此時(shí)從網(wǎng)絡(luò)角度看，我們發(fā)起的是HTTP請(qǐng)求，HTTP代表了網(wǎng)絡(luò)協(xié)議，于是服務(wù)器收到請(qǐng)求后，會(huì)返回給我們需要的網(wǎng)頁，此時(shí)重點(diǎn)來了：

服務(wù)器收到請(qǐng)求后，從它的內(nèi)部搜索對(duì)應(yīng)的HTML文檔，在這個(gè)例子中，它搜索的是網(wǎng)站的官網(wǎng)HTML頁面，與此同時(shí)，如果該頁面本身有圖像，那么這些所有的圖像會(huì)以一個(gè)一個(gè)的url的形式返回，而后在進(jìn)一步加載中，每一個(gè)url可能再發(fā)起一次HTTP請(qǐng)求，如果此時(shí)使用的是非持續(xù)的HTTP連接，那么TCP帶來的RTT時(shí)延是很可觀的，因此為了減少時(shí)延，精靈圖誕生了：

精靈圖把網(wǎng)頁中所需的所有的小圖片，都集成在一張圖上，通過修改圖片的定位，達(dá)到一張圖頂n張圖的效果，加載時(shí)只需要加載一張圖片即可！

最后的最后，強(qiáng)調(diào)一下，精靈圖不是一項(xiàng)新的功能，而是一個(gè)新技術(shù)或新思想，它的實(shí)現(xiàn)是由舊的功能解決的。

II.精靈圖的實(shí)現(xiàn)方式：拼出你的名字

那么精靈圖是怎么實(shí)現(xiàn)的呢？這里舉一個(gè)小例子：

我先給一張圖片：

好了，那么接下來我提出需求：

僅用上面的一張圖，把你的名字的拼音全拼顯示在頁面上

那么第一時(shí)間，如果有前端CSS基礎(chǔ)，你想到的方法是什么呢？

答案是：背景圖片 + 背景圖片定位！

詳細(xì)的步驟可以分為下面的兩步：

1?? 首先，我們把圖片放入一個(gè)指定大小的“盒子”中做背景，這個(gè)盒子的大小設(shè)置的和圖片上的一個(gè)單元一樣大，以本例來說，盒子的尺寸就是一個(gè)圖片上一個(gè)字母的大小！

2?? 而后通過背景圖片定位，我們把該單元?jiǎng)偤枚ㄎ坏竭@個(gè)盒子中，此時(shí)就只有該單元被顯示了出來，其他單元將由于盒子的大小有限而不會(huì)被顯示！

上圖是我對(duì)實(shí)現(xiàn)步驟的一個(gè)圖解，其中，最里面藍(lán)色的和最外面黃色的區(qū)域，其實(shí)是一張圖片，藍(lán)色區(qū)域是黃色的整圖的一個(gè)單元，而紅色是我們定義的盒子，可以看到盒子的大小應(yīng)該與小單元一致(這里盒子稍微大一點(diǎn)，是由于方便大家觀看，實(shí)際中二者應(yīng)該是重合關(guān)系)

好了，那么現(xiàn)在再介紹一下在網(wǎng)頁中，坐標(biāo)軸與實(shí)際中的區(qū)別：

這區(qū)別使我們?cè)谧鼍`圖的定位時(shí)，要注意取值可能要加一個(gè)負(fù)號(hào)！

最后簡(jiǎn)單放一下上面顯示你的名字的部分源碼：

.l{
    background-img : url(pic.jpg);
    background-position : -1px -274px;
}
 
.o{
    background-img : url(pic.jpg);
    background-position : -1px -274px;
}
 
.b{
    background-img : url(pic.jpg);
    background-position : -1px -274px;
}
 
.s{
    background-img : url(pic.jpg);
    background-position : -1px -274px;
}
 
.t{
    background-img : url(pic.jpg);
    background-position : -1px -274px;
}
 
.e{
    background-img : url(pic.jpg);
    background-position : -1px -274px;
}
 
.r{
    background-img : url(pic.jpg);
    background-position : -1px -274px;
}

大家注意，代碼中url需要換上精靈圖的url，定位按照我上面的介紹即可。

III.軟件輔助定位

最后給大家推薦一款實(shí)現(xiàn)輔助定位的軟件：Adobe Firework

它的使用方法也很簡(jiǎn)潔：

只需要把圖片導(dǎo)入，選擇切片工具，之后即可進(jìn)行切片，我們把需要切片的單元切出來，在軟件下方就會(huì)顯示出它的坐標(biāo)，復(fù)制該坐標(biāo)，我們就輕松定位到了單元！

由于Adobe Firework已經(jīng)停止更新了，所以不是很好找到下載地址，這里我給一個(gè)臨時(shí)地址，供大家下載和學(xué)習(xí)使用

鏈接: https://pan.baidu.com/s/11eiPuCfS6RGR72NCgSWL8g?pwd=c8w5 

提取碼: c8w5

到此這篇關(guān)于CSS精靈圖的原理與使用方法介紹的文章就介紹到這了,更多相關(guān)CSS精靈圖使用方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論