CSS圖片組合適配是一種常見的網站布局技術，它通過將多個圖片組合在一起來達到更好的展示效果。在實踐中，我們通常會遇到以下幾種情況，需要在CSS中進行圖片組合適配。

1. 背景圖與元素圖的組合適配。
background: url("bg.png") no-repeat left top;
background-position: 10px 15px;
background-image: url("icon.png");
background-position: 5px 5px;

這段代碼演示了兩張圖片的組合適配，其中bg.png是背景圖像，icon.png是要覆蓋在背景上的元素圖像。background-position屬性用來設置元素圖像的位置，可以使用像素值或百分比進行調整。通過這種方式，我們可以在頁面中實現更加豐富的圖像效果。

2. 多個元素圖像的組合適配。
.icon1 {
background: url("icon1.png") no-repeat left top;
width: 32px;
height: 32px;
background-position: 0 0;
}
.icon2 {
background: url("icon2.png") no-repeat left top;
width: 32px;
height: 32px;
background-position: -32px 0;
}

這段代碼演示了如何在CSS中組合多個元素圖像。我們可以將不同的圖像分別設置為對應的class，然后通過調整background-position屬性的值來控制它們之間的相對位置。這種方法適用于小圖標的展示，可以極大地減小網站的加載時間。

3. 響應式圖片組合適配。
@media screen and (max-width: 768px) {
.left-image {
display: none;
}
.right-image {
background-image: url("mobile.jpg");
}
}
@media screen and (min-width: 769px) {
.right-image {
background-image: url("desktop.jpg");
}
}

以上代碼演示了一種響應式圖片組合適配的方法。通過使用@media規則，我們可以根據不同的屏幕寬度來展示不同的圖片。在手機等小屏幕上，我們可以將不必要的圖片隱藏起來，同時把另一張圖片調整到合適的位置進行展示。

綜上所述，CSS圖片組合適配是一種功能強大的網站布局技術，可以幫助我們實現更加豐富的圖像效果，提高網站的用戶體驗。無論你是在制作小圖標，還是要處理響應式圖片，這些技巧都將幫助你更好地掌握這項技術。