CSS精靈技術是一種常用的web設計技巧，可以將多張小圖片合并成一張大圖片，并通過CSS來控制顯示不同的部分。這種技術在減少http請求次數，提高網站性能方面有很好的效果。

.icon {
	background:url(../images/icons.png) no-repeat;
	display:inline-block;
}
.mail {
	width: 22px;
	height: 22px;
	background-position:-1px -1px;
}
.camera {
	width: 22px;
	height: 22px;
	background-position:-26px -50px;
}
.music {
	width: 22px;
	height: 22px;
	background-position:-51px -27px;
}

如上所示，我們可以通過css的background-url屬性來引入大圖片，然后定義一個.icon class為這張大圖片設定一次background。在此基礎上，我們可以通過設定background-position來控制顯示哪一部分的圖片。舉個例子，當我們想要顯示一個郵件icon的時候，就可以在對應的元素上添加.mail class，然后設定width，height以及background-position為(-1px -1px)。同樣地，我們也可以創建其他的icon，通過不同的background-position來顯示不同的部分。

這種技術在designing sprite-based icons，簡單圖標效果的應用上相當常見，應該是UIs技能樹的基礎知識之一。