㈠雪碧圖出現的原因
當我們打算用圖片做按鈕的背景圖片時，在設置完link，hover，active的background-image：url（相對路徑）的相關功能后，
發現在第一次切換圖片時，會發現圖片有一個非常快的閃爍，這個閃爍會造成一次不佳的用戶體驗
產生的原因：
背景圖片是以外部資源的形式加載進網頁的，瀏覽器每加載一個外部資源就需要單獨的發送一次請求，
但是我們外部資源並不是同時加載，瀏覽器會在資源被使用時才去加載資源
下面的示例，一上來瀏覽器只會加載link.png，由於hover和active的狀態沒有馬上觸發，
所以hover.png和active.png並不是立即加載的
當hover被觸發時，瀏覽器才去加載hover.png
當active被觸發時，瀏覽器才去加載active.png
由於加載圖片需要一定的時間，所以在加載和顯示的過程會有一段時間，背景圖片無法顯示，導致出現閃爍的情況
為了解決該問題，可以將三個圖片整合為一張圖片，這樣可以同時將三張圖片一起加載，就不會出現閃爍的問題了。
然后再通過background-position來切換要顯示的圖片的位置，這種技術叫做圖片整合技術（CSS-Sprite）
圖片整合技術（CSS-Sprite）的優點：
1.將多個圖片整合為一張圖片里，瀏覽器只需要發送一次請求，可以同時加載多個圖片，提高訪問效率，提高了用戶體驗
2.將多個圖片整合為一張圖片，減少了圖片的總大小，提高請求的速度，增加了用戶體驗
㈡雪碧圖做按鈕的示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪碧圖按鈕</title> <style> .btn:link{ display: block; width: 149px; height: 49px; background-image: url(2.png); background-repeat: no-repeat ; } .btn:hover{ background-position: -172px 0; } .btn:active{ background-position: -344px 0; } </style> </head> <body> <a class="btn" href="#"></a> </body> </html>
原圖：
效果圖：
