<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
做完功能以后，發(fā)現(xiàn)在第一次切換圖片的時(shí)候体斩，會(huì)發(fā)現(xiàn)圖片有一個(gè)非扯耍快的閃爍，
這個(gè)閃爍會(huì)造成一次不佳的用戶體驗(yàn)滚秩。
產(chǎn)生問題的原因：
背景圖片是以外部資源的形式加載進(jìn)網(wǎng)頁的，流浪器每加載一個(gè)外部資源就需要單獨(dú)的發(fā)送一次請(qǐng)求，
但是我們外部資源并不是同時(shí)加載泡徙，瀏覽器會(huì)在資源被使用才去加載資源
我們這個(gè)練習(xí)椿疗，一上來瀏覽器只會(huì)加載link.png由于hover和active的狀態(tài)沒有馬上觸發(fā)漏峰，
所以hover.png和active.png并不是立即加載的
當(dāng)hover和active觸發(fā)的時(shí)候才會(huì)去加載
為了解決該問題，可以將三個(gè)圖片整合為一張圖片届榄，這樣可以同時(shí)將三張圖片一起加載浅乔，就不會(huì)出現(xiàn)閃爍的問題了，
然后在通過background-position來切換要顯示的圖片的位置，這種技術(shù)叫做圖片整合技術(shù)（CSS-Sprite）精靈圖
優(yōu)點(diǎn)：
1 將多個(gè)圖片整合為一張圖片里靖苇，瀏覽器只需要發(fā)送一次請(qǐng)求席噩，可以同時(shí)加載多個(gè)圖片，提高訪問效率贤壁，提高用戶體驗(yàn)悼枢。
2 將多個(gè)圖片整合為一張圖片，減少了圖片的總大小脾拆，提高請(qǐng)求速度萧芙，增強(qiáng)了用戶體驗(yàn)
*/
.btn:link {
/* 將a轉(zhuǎn)化為塊元素 */
display: block;
width: 93px;
height: 29px;
background-image: url(img/btn/link.png);
background-repeat: no-repeat;
}
.btn:hover {
background-image: url(img/btn/hover.png);
}
.btn:active {
background-image: url(img/btn/active.png);
}
</style>
</head>
<body>
<a href="#" class="btn"></a>
</body>
</html>
