雪碧圖是一種CSS圖像合并技術(shù)，該方法是將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。
雪碧圖被運(yùn)用在眾多使用了很多小圖標(biāo)的網(wǎng)站上。相對(duì)于把每張小圖標(biāo)以.png格式文件的形式引用到頁面上，使用雪碧圖只需要引用一張圖片，對(duì)內(nèi)存和帶寬更好，并且可以減小圖片的總大小。
雪碧圖的制作與使用方法：
使用圖像編輯軟件如Photoshop將多張圖放到同一個(gè)圖層并導(dǎo)出。
原圖如下：
2.jpg
使用自動(dòng)化構(gòu)建工具自動(dòng)拼接合并后的圖片。
引用圖片時(shí)，圖片地址為合并后的圖片地址。
需要進(jìn)行截圖
1.jpg
3.jpg
源代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按鈕練習(xí)</title>
<style type="text/css">
.im:link{
display: block;
background-image: url(1.jpg);
width: 129px;
height: 46px;
}
.btn{
display: block;
width: 50px;
height: 29px;
background-image: url(2.jpg);
background-repeat: no-repeat;
}
.btn:hover{
background-position: -50px 0px;
}
.btn:active{
background-position: -186px 0px;
}
</style>
</head>
<body>
<a href="#" class="im"></a>
<a href="#" class="btn"></a>
</body>
</html>
