問題

​ 比方說，當想要使用a標籤實現不同點擊背景時，在點選切換圖片時可能會由於圖片載入速度出現閃白問題。

解決方案

​ 解決圖片閃爍問題，可以將多個小圖片統一儲存到一個大圖片中，來通過調整background-position來顯示圖片，這樣圖片會同時載入到網頁中就可以有效的避免出現閃爍的問題。這個技術在網頁中應用十分廣泛，被稱為CSS Sprite，這種圖我們稱為雪碧圖

a:link{
    display:block;
    width:50px;
    background-image: url('./img/雪碧圖.jpg');
}
a:hover{
    background-position: -50px 0;
}
a:active{
    background-position: -100px 0;
}
 

雪碧圖使用步驟

1. 先確定要使用的圖示

2. 測量圖示的大小

3. 根據測量結果建立一個元素

4. 將雪碧圖設定為元素的背景圖片

5. 設定一個偏移量以顯示正確的圖片

雪碧圖的特點

1. 優點
   • 一次性將多個圖片載入進頁面，降低請求的次數，加快訪問速度，提高使用者的體驗
   • 減少圖片的位元組數，並解決了圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要分別對每一個小元素進行命名
   • 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變
2. 缺點
   • 在寬屏，高解析度的螢幕下的自適應頁面，雪碧圖如果不夠寬，容易出現背景斷裂
   • 在開發的時候，需要通過photoshop或其他工具測量計算每一個背景單元的精確位置
   • 在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要修改整張合併的圖片