CSS交替圖是一種常用于網頁設計的技術，利用CSS的background-image屬性與偽類元素的結合，可以輕松地為元素添加鼠標懸停時切換圖片的效果。以下是一個簡單的CSS交替圖實例：

/* 定義元素樣式 */
.icon {
width: 100px;
height: 100px;
background-image: url('normal.png');
background-repeat: no-repeat;
background-position: center;
position: relative;
}
/* 定義偽類樣式 */
.icon:hover::before {
content: '';
width: 100%;
height: 100%;
background-image: url('hover.png');
background-repeat: no-repeat;
background-position: center;
position: absolute;
}

上面的代碼中，首先定義了一個class為icon的元素，其中設置了元素的長寬、背景圖片以及位置。接著定義了一個hover偽類樣式，通過將偽類選擇器::before與元素的:hover結合使用，實現了鼠標懸停時切換背景圖片的效果。具體實現方式是通過::before偽類元素添加一個具有hover背景圖片的背景層，設置該元素為position:absolute，覆蓋在.icon元素上方。這樣，當鼠標懸停在.icon元素上時，就會顯示背景層，從而實現了交替圖效果。

除了使用偽類元素，還可以使用JavaScript等其他技術實現CSS交替圖效果。但是，在大多數情況下，CSS交替圖仍然是最簡單、實用的實現方式。