在網頁設計中，圖片是不可或缺的元素之一。為了增加圖片的觀賞性和交互性，我們可以利用CSS來實現圖片點擊變色效果。 首先，我們需要給圖片添加一個CSS類名，例如 "clicked"。然后，我們可以使用:hover偽類來實現當鼠標懸浮在圖片上時，改變圖片的顏色。代碼如下：

.clicked:hover {
filter: grayscale(100%);
}

上述代碼中，filter屬性被用于改變圖片的顏色。在這里，我們使用了grayscale()函數來將圖片轉換為灰色。 如果希望在圖片被點擊后改變顏色，我們可以添加一個JavaScript事件監聽器來實現這一效果。代碼如下：

var images = document.querySelectorAll('img.clicked');
for (var i = 0; i< images.length; i++) {
images[i].addEventListener('click', function() {
this.classList.toggle('active');
});
}

上述代碼中，我們使用querySelectorAll方法將所有具有 "clicked"類名的圖片選中，然后為它們添加一個點擊事件監聽器。在點擊事件中，我們使用classList.toggle()方法來為圖片添加或移除 "active"類名。接下來，我們可以使用CSS樣式表來為 "active"類名定義新的樣式。

.clicked.active {
filter: none;
border: 2px solid red;
}

在上述代碼中，我們使用了border屬性為圖片添加了一個紅色的邊框，以便突出顯示。同時，我們通過將filter屬性設置為"none"來取消原本的灰色效果。 總之，在網頁設計中，通過使用CSS和JavaScript技巧，可以輕松實現圖片點擊變色的效果。這不僅可以提高圖片的觀賞性和交互性，還可以為網站帶來更好的用戶體驗。