CSS+合成圖片是一種常用的Web前端技術。該技術可以將多張小圖片合并為一張大圖片，從而減少網頁加載的HTTP請求次數，提升網頁的加載速度。本文將介紹CSS+合成圖片的基本原理和步驟。

CSS+合成圖片的基本原理是利用CSS的background屬性和background-position屬性來顯示合成后的大圖片。具體來說，我們需要按照一定的規則將多張小圖片排列在一張大圖片中，并將這張大圖片賦值給CSS的background屬性。然后，我們可以通過CSS的background-position屬性來控制顯示哪一部分的小圖片。

/* 定義小圖片的樣式 */
.logo {
width: 100px;
height: 100px;
background-image: url('logo.png');
}
/* 定義大圖片的樣式 */
.sprite {
background-image: url('sprite.png');
}
/* 控制顯示哪個小圖片 */
.logo1 {
background-position: 0 0;
}
.logo2 {
background-position: -100px 0;
}
.logo3 {
background-position: -200px 0;
}
/* HTML代碼 */

上面的代碼中，我們首先定義了三個小圖片（分別為.logo1、.logo2和.logo3），它們共用一張大圖片（.sprite）。然后，我們通過CSS的background-position屬性控制顯示哪個小圖片。

總的來說，CSS+合成圖片是一種優化Web前端性能的方法。雖然需要一定的額外工作，但通過減少HTTP請求次數，我們可以提高網頁的加載速度，從而提升用戶的體驗。