CSS精靈圖技術(shù)（提高頁面的加載速度）

時間：2023-07-06 15:30:02 | 來源：網(wǎng)站運營

時間：2023-07-06 15:30:02 來源：網(wǎng)站運營

CSS精靈圖技術(shù)（提高頁面的加載速度）：未來2088 2019-11-28 18:00:00





哈嘍大家好，我是作者“未來”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變?yōu)閃eb前端高手哦！

志同道合的小伙伴跟我一起學習交流哦！
第二階段 CSS3
18 CSS精靈技術(shù)

1 CSS精靈技術(shù)產(chǎn)生的背景



圖所示為網(wǎng)頁的請求原理圖，當用戶訪問一個網(wǎng)站時，需要向服務器發(fā)送請求，網(wǎng)頁上的每張圖像都要經(jīng)過一次請求才能展現(xiàn)給用戶，然而，一個網(wǎng)頁中往往會應用很多小的背景圖像作為修飾，當網(wǎng)頁中的圖像過多時，服務器就會頻繁地接受和發(fā)送請求，這將大大降低頁面的加載速度。為了有效地減少服務器接受和發(fā)送請求的次數(shù)，提高頁面的加載速度，出現(xiàn)了CSS精靈技術(shù)（也稱 CSS Sprites、CSS雪碧）。
2 CSS精靈技術(shù)的本質(zhì)
簡單地說，CSS精靈是一種處理網(wǎng)頁背景圖像的方式。它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應用于網(wǎng)頁，這樣，當用戶訪問該頁面時，只需向服務發(fā)送一次請求，網(wǎng)頁中的背景圖像即可全部展示出來。通常情況下，這個由很多小的背景圖像合成的大圖被稱為精靈圖，如下圖所示為京東網(wǎng)站中的一個精靈圖。



3 CSS精靈技術(shù)的使用
CSS精靈其實是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網(wǎng)頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖，就需要使用CSS的 background- Image、 background- repeat和 background- position屬性進行背景定位，其中最關(guān)鍵的是使用 background-position，屬性精確地定位。



No-repeat 不平鋪 ，橫坐標x為0 ，縱坐標y為-100，
4 拼出自己的名字






5 王者榮導航欄



找到一個較小的圖片背景，open in new tab 可以查看到精靈圖
6 PS制作精靈圖
CSS精靈其實是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖），那我們要做的，就是把小圖拼合成一張大圖。
大部分情況下，精靈圖都是網(wǎng)頁美工做。
我們精靈圖上放的都是小的裝飾性質(zhì)的背景圖片。插入的大圖片不能往上放
我們精靈圖的寬度取決于最寬的那個背景。
我們可以橫向擺放也可以縱向擺放，但是每個圖片之間，間隔至少隔開偶數(shù)像素合適。
在我們精靈圖的最低端，留一片空隙，方便我們以后添加其他精靈圖。
結(jié)束語：小公司，背景圖片很少的情況，沒有必要使用精靈技術(shù)，維護成本太高。如果是背景圖片比較多，可以建議使用精靈技術(shù)。
7 運用制作精靈圖



Ps確定xy軸和寬高



看不懂的小伙伴不要氣餒，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學習