CSS是一種非常強大的網頁樣式設計語言，可以用來控制網頁元素的各種樣式屬性。在實際的網頁制作過程中，經常會需要實現點擊圖片更改其路徑的功能。那么如何使用CSS實現這個功能呢？

HTML代碼：
<div class="img-container">
<img src="img1.jpg" class="img" id="img1">
</div>
CSS代碼：
.img-container {
width: 300px;
height: 300px;
border: 1px solid #ccc;
text-align: center;
}
.img {
width: 100%;
height: 100%;
cursor: pointer;
}
.img:hover {
opacity: 0.7;
}
JavaScript代碼：
var img = document.getElementById("img1");
img.onclick = function() {
this.src = "img2.jpg";
}

以上代碼中，我們首先定義了一個包含圖片的div容器，容器的樣式用CSS進行設置。然后定義了圖片的樣式，包括寬高和鼠標懸浮時的透明度效果。最后使用JavaScript代碼實現了點擊圖片更改其src屬性的功能。

需要注意的是，在實際的開發過程中，需要根據實際情況進行一定的修改和調整，以達到更佳的代碼效果和用戶體驗。