首頁技術(shù)文章正文

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

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

好口碑IT培訓(xùn)

一個(gè)網(wǎng)頁中往往會應(yīng)用很多小的背景圖像作為修飾,當(dāng)網(wǎng)頁中的圖像過多時(shí),服務(wù)器就會頻繁地接收和發(fā)送請求圖片,造成服務(wù)器請求壓力過大,這將大大降低頁面的加載速度。
因此,為了有效地減少服務(wù)器接收和發(fā)送請求的次數(shù),提高頁面的加載速度,出現(xiàn)了CSS精靈技術(shù)(也稱CSS Sprites、CSS雪碧)。
核心原理:將網(wǎng)頁中的一些小背景圖像整合到一張大圖中,這樣服務(wù)器只需要一次請求就可以了。

使用精靈圖核心:
1. 精靈技術(shù)主要針對于背景圖片使用。就是把多個(gè)小背景圖片整合到一張大圖片中。
2. 這個(gè)大圖片也稱為 sprites 精靈圖 或者 雪碧圖
3. 移動背景圖片位置, 此時(shí)可以使用 background-position 。
4. 移動的距離就是這個(gè)目標(biāo)圖片的 x 和 y 坐標(biāo)。注意網(wǎng)頁中的坐標(biāo)有所不同
5. 因?yàn)橐话闱闆r下都是往上往左移動,所以數(shù)值是負(fù)值。
6. 使用精靈圖的時(shí)候需要精確測量,每個(gè)小背景圖片的大小和位置。
總結(jié):
1. 精靈圖主要針對于小的背景圖片使用。
2. 主要借助于背景位置來實(shí)現(xiàn)---background-position 。
3. 一般情況下精靈圖都是負(fù)值。(千萬注意網(wǎng)頁中的坐標(biāo): x軸右邊走是正值,左邊走是負(fù)值, y軸同理。)





猜你喜歡:

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

css unicode字體是什么?

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

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

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

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!