使用精靈圖的核心要義是什么？為什么使用精靈圖？

更新時(shí)間:2021-09-16 來(lái)源:黑馬程序員瀏覽量:

一個(gè)網(wǎng)頁(yè)中往往會(huì)應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁(yè)中的圖像過(guò)多時(shí)，服務(wù)器就會(huì)頻繁地接收和發(fā)送請(qǐng)求圖片，造成服務(wù)器請(qǐng)求壓力過(guò)大，這將大大降低頁(yè)面的加載速度。

因此，為了有效地減少服務(wù)器接收和發(fā)送請(qǐng)求的次數(shù)，提高頁(yè)面的加載速度，出現(xiàn)了CSS精靈技術(shù)（也稱CSS Sprites、CSS雪碧）。

核心原理：將網(wǎng)頁(yè)中的一些小背景圖像整合到一張大圖中，這樣服務(wù)器只需要一次請(qǐng)求就可以了。

使用精靈圖核心：

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)頁(yè)中的坐標(biāo)有所不同

5. 因?yàn)橐话闱闆r下都是往上往左移動(dòng)，所以數(shù)值是負(fù)值。

6. 使用精靈圖的時(shí)候需要精確測(cè)量，每個(gè)小背景圖片的大小和位置。
總結(jié)：
1. 精靈圖主要針對(duì)于小的背景圖片使用。
2. 主要借助于背景位置來(lái)實(shí)現(xiàn)---background-position 。
3. 一般情況下精靈圖都是負(fù)值。（千萬(wàn)注意網(wǎng)頁(yè)中的坐標(biāo)： x軸右邊走是正值，左邊走是負(fù)值， y軸同理。）

猜你喜歡：

css陰影效果屬性：box-shadow屬性詳解

css unicode字體是什么？

書寫CSS需要遵循哪些規(guī)則？它的結(jié)構(gòu)有什么特點(diǎn)？

最新web面試題css瀏覽器的兼容性問題

黑馬程序員前端與移動(dòng)開發(fā)課程