在網頁設計中，圖像是一個非常重要的元素。要使圖像更加飽和和生動，我們可以使用CSS技術來讓圖像從灰色變成彩色。這種效果可以讓網頁看起來更現代化，也可以為網頁增加一些個性和調性。下面我來分享一下如何使用CSS讓圖像從灰色變為彩色：

/*將圖像設為灰度*/
img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
/*鼠標移過時變為彩色*/
img:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
}

上面的代碼很簡單，使用了CSS3中的濾鏡功能。首先，我們將圖像的濾鏡設為灰度，使其完全變成黑白色調。接著，當鼠標移過時，將濾鏡設置為0%，圖像就會變得豐富多彩，非常驚艷。

當然，你還可以使用不同的CSS濾鏡組合來改變圖像的顏色和飽和度等屬性，以達到更多的特效效果。例如，下面的代碼可以在圖像變為彩色時增加一些透明度效果：

/*將圖像設為灰度*/
img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
opacity: 0.5;
}
/*鼠標移過時變為彩色*/
img:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
opacity: 1;}

好了，以上就是CSS圖片灰色變彩色的實現方式。希望能夠幫助你提升網頁設計的審美效果，讓網頁更加醒目。