5. CSS精靈技術（sprite) 重點

5.1 為什么需要精靈技術

圖所示為網頁的請求原理圖，當用戶訪問一個網站時，需要向服務器發送請求，網頁上的每張圖像都要經過一次請求才能展現給用戶。

然而，一個網頁中往往會應用很多小的背景圖像作為修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送請求，這將大大降低頁面的加載速度。

pink老師告訴你我們為什么需要精靈技術：

為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度。

出現了CSS精靈技術（也稱CSS Sprites、CSS雪碧）。

5.2 精靈技術講解

CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖。

這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像即可全部展示出來。

我們需要使用CSS的

• background-image、
• background-repeat
• background-position屬性進行背景定位，
• 其中最關鍵的是使用background-position 屬性精確地定位。

5.3 精靈技術使用的核心總結

首先我們知道，css精靈技術主要針對于背景圖片，插入的圖片img 是不需要這個技術的。

精確測量，每個小背景圖片的大小和 位置。

給盒子指定小背景圖片時， 背景定位基本都是 負值。

5.4 制作精靈圖(了解)

CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），那我們要做的，就是把小圖拼合成一張大圖。

大部分情況下，精靈圖都是網頁美工做。

我們精靈圖上放的都是小的裝飾性質的背景圖片。 插入圖片不能往上放。 我們可以橫向擺放也可以縱向擺放，但是每個圖片之間留有適當的空隙 在我們精靈圖的最低端，留一片空隙，方便我們以后添加其他精靈圖。

結束語： 小公司，背景圖片很少的情況，沒有必要使用精靈技術，維護成本太高。 如果是背景圖片比較多，可以建議使用精靈技術。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的五、pink老师的学习笔记——CSS精灵技术（sprite)的全部內容，希望文章能夠幫你解決所遇到的問題。

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