在網頁設計中，經常會有這樣的需求：點擊圖片變色。這個需求的實現方法有很多種，本文將介紹一種使用CSS實現點擊圖片變色效果的方法。

img:hover {
filter: grayscale(100%); /*圖片置灰*/
}
img:active {
filter: none; /*去掉置灰效果*/
opacity: 0.5; /*設置圖片透明度*/
}

在上面的代碼中，采用了CSS的:hover和:active偽類實現。當鼠標移至圖片上時，使用filter將圖片置灰；而當鼠標點擊時，使用filter去掉置灰效果，并設置圖片透明度為50%。

除了上面的方法，還可以使用CSS3的transition屬性實現點擊圖片漸變變色效果：

img {
transition: all 0.3s ease;
}
img:hover {
filter: grayscale(100%);
}
img:active {
filter: none;
background-color: #f5f5f5;
}

以上代碼的實現原理和上面的方法類似，只不過使用了transition屬性實現了漸變效果，并在:active狀態下添加了背景顏色。

總之，點擊圖片變色效果的實現方法有很多種，本文只是介紹了其中兩種。在實際應用中，可以根據需求自由組合使用。