CSS Sprites技術被國內一些人稱為CSS雪碧圖，其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。 CSS 雪碧圖技術不是什麼新東西，在網頁應用中已經有幾年了，現在的網頁開發在圖示圖片的應用上已經趨向於使用字型圖示，這是一種比CSS雪碧圖技術更優雅的圖示應用方式。 比如：

CSS知識點：

• • background-image
  • backgorund-position
• 特點：
  
  1. 相對於當個小圖示，它節省檔案體積和服務請求次數。將所有零碎的網頁背景圖片整合到一起，這樣做可以有效的減少http對圖片的請求次數，而不需要載入多次載入零碎的背景圖片，所以合理的利用好它可以有效的提高網頁的載入速度。
  2. 一般情況下，你需要儲存為PNG-24的檔案格式。
  3. 可以設計出豐富多彩的顏色體表。

<span style="color:#444444;">.toolbar{
	right:10px;
	bottom:10px;
	</span><span style="color:#ff0000;">position:fixed;</span><span style="color:#444444;">
}
.blog{
	</span><span style="color:#ff0000;">background-position: 0 -798px;
	&:hover{
		background-position: 0 -860px;
	}</span><span style="color:#444444;">
}
.feedback{
	background-position: 0 -426px;
	&:hover{
		background-position: 0 -488px;
	}
}
.app{
	background-position: 0 -550px;
	&:hover{
		background-position: 0 -612px;
	}
}
.top{
	background-position: 0 -674px;
	&:hover{
		background-position: 0 -736px;
	}
}
.toolbar-item{
	</span><span style="color:#ff0000;">display: block;
	width: 52px;
	height: 52px;
	background-image: url(../img/toolbar.png);
	background-repeat: no-repeat;</span><span style="color:#444444;">
	margin-top: 1px;
}
</span>
 

必須先確定長 寬 背景的整張圖片 不重複

        display: block;
	width: 52px;
	height: 52px;
	background-image: url(../img/toolbar.png);
	background-repeat: no-repeat;

利用background-position屬性 它有兩個引數，分別是水平方向移動的畫素、豎直方向移動的畫素，都用負數表示。大圖不動，div移動，也只能是向右、向下移動，只要記住這兩個方向移動的畫素都用負數表示就行了！

.blog{
	background-position: 0 -798px;
	&:hover{
		background-position: 0 -860px;
	}
}
 

至於畫素是多少 我用的是PS 放大圖片 用標尺+參考線來看畫素（將標尺單位改為畫素即可）