CSS 切換圖是一種在網站界面優化中經常使用的技術，它能夠為不同的交互體驗提供有效的支持。以下是使用 CSS 切換圖的一些示例代碼：

/* HTML 代碼 */
<div class="img-container">
<img src="image-1.jpg" alt="Example Image 1">
<img src="image-2.jpg" alt="Example Image 2">
<img src="image-3.jpg" alt="Example Image 3">
<img src="image-4.jpg" alt="Example Image 4">
</div>
/* CSS 代碼 */
.img-container {
position: relative;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.img-container img:first-child {
opacity: 1;
}
.img-container:hover img {
opacity: 1;
}

上述代碼使用了 CSS 的:hover選擇器和過渡效果，使得在鼠標移到圖像容器上時能夠順滑地顯示其他的圖像。下面對代碼解釋如下：

1. 設置圖像容器相對定位；
2. 設定所有圖像絕對定位在容器的左上角并透明；
3. 設定第一張圖像的不透明度為 1，即默認顯示第一張圖像；
4. 當鼠標移到圖像容器上時，所有圖像變為不透明狀態（不包括第一張圖像）。

這里做的是一種簡單的 CSS 圖片展示，但是類似技術還可以更進一步，例如應用 JavaScript 控制事件來實現更具交互性的切換圖效果。