在網頁設計中，合成 CSS 圖（CSS sprite）是一種很常見的優化技巧，用來減少 HTTP 請求和加速頁面加載速度。

合成 CSS 圖其實就是把一堆小的圖片合并成一張大圖，然后利用 CSS 的 background-position 屬性來控制顯示位置。如下面這個例子：

.sprite {
background: url("sprite.png") no-repeat;
}
.icon1 {
width: 100px;
height: 100px;
background-position: 0 0;
}
.icon2 {
width: 80px;
height: 80px;
background-position: -100px 0;
}
.icon3 {
width: 120px;
height: 120px;
background-position: -180px 0;
}

上面的代碼中，我們把三個小圖標合成了一張大圖，并分別給它們設置了不同的 background-position。在使用時，只需要給對應的 HTML 元素添加相應的類名即可。這樣做可以減少 HTTP 請求，提升頁面速度。

當然，合成 CSS 圖還有很多細節需要注意。比如，合成后的大圖寬高應該是所有小圖標寬度之和，高度取最高的一張圖片的高度。同時，在制作大圖時要注意圖片之間留有一定的空隙，以免在使用時出現顯示異常的問題。

總之，合成 CSS 圖是一種簡單卻十分實用的技巧，它可以大大提升網頁的性能，同時也方便我們管理和維護多張小圖片。在實踐中盡量多嘗試，掌握它的使用技巧，可以讓我們設計更加高效優秀的網頁。