iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
自我挑戰組

從零開始前端學習(HTML、CSS、JavaScript) 系列 第 18

Day 18 CSS <Sprite 精靈圖>

1. 為什麼需要精靈圖

一個網頁中會需要很多小的背景作為修飾,若圖像過多服務器頻繁接收&發送會造成服務器壓力過大,將降低頁面加載速度

因此,為了有效減少服務器壓力提高頁面的加載速度,就使用CSS精靈圖技術來解決問題 ( 也稱 CSS Sprites , CSS雪碧)。

核心原理 : 將網頁中的小背景圖像整合到大圖中,這樣服務器就只需要一次請求即可。

精靈圖技術目的 : 為了有效減少服務器接收&發送請求的次數,提高頁面的加載速度

2. 精靈圖的使用

a. 精靈圖技術主要針對背景圖片使用,就是把多個小背景圖片整合到一張大圖片中。
b. 這個大圖片也稱Sprites 精靈圖 或者 雪碧圖
c. 移動背景圖片位置,可以使用background-position
d. 移動的距離就是這個目標圖片的 x 和 y 座標。注意網頁中的座標有所不同
e. 因為一般情況下都是往上往左移動,所以是負值
f. 使用精靈圖時需要精確測量每個小背景圖片的大小和位置

3. 總結

a. 精靈圖主要針對小的背景圖片使用
b. 主要藉助於背景位置來實現—background-position
c. 一般情況下精靈圖都是負值。

(X軸右邊為正值,左邊為負 y軸同理)

w3school 精靈圖說明


上一篇
Day 17 CSS <用戶介面樣式 & 三角>
下一篇
Day 19 CSS <icon font 字體圖標>
系列文
從零開始前端學習(HTML、CSS、JavaScript) 30

尚未有邦友留言

立即登入留言