教育行業A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

為什么需要精靈圖?使用精靈圖的核心原理是什么?

更新時間:2021年09月15日14時54分 來源:傳智教育 瀏覽次數:

好口碑IT培訓

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

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





猜你喜歡:

input邊框顏色怎么設置?如何去掉默認顏色?【CSS教程】

CSS3 box-shadow的用法|box-shadow屬性詳解

CSS3中怎樣將box-sizing設為content-box?

unicode字體是什么?【CSS教程】

傳智教育HTML前端與移動開發課程

0 分享到:
美女裸体无遮挡扒开尿囗