CSS點擊后換圖片功能是一種常見的網頁美化技巧，其主要作用是在用戶點擊一個圖片后，自動切換成另一個圖片，從而達到動態交互的效果。

/* CSS樣式代碼 */
.btn {
width: 100px;
height: 30px;
background-image: url('btn-normal.png');
}
.btn:hover {
background-image: url('btn-hover.png');
}
.btn:active {
background-image: url('btn-active.png');
}

在上述的CSS樣式代碼中，我們通過定義三個偽類狀態：正常、懸停和激活來實現點擊后換圖片的效果。

首先，我們在樣式代碼中為按鈕定義了一個初始狀態.btn，其中使用了一個名為 btn-normal.png 的背景圖片，表示按鈕的正常狀態。

接著，我們使用偽類選擇器 :hover 定義了按鈕的懸停狀態，當用戶光標移動到按鈕上時，背景圖片切換為 btn-hover.png，表示按鈕的懸停狀態。

最后，我們使用偽類選擇器 :active 定義了按鈕的激活狀態，當用戶點擊按鈕時，背景圖片切換為 btn-active.png，表示按鈕被激活。

通過這種方式，我們可以很方便地實現點擊后換圖片的效果，從而增強網頁的交互體驗。