CSS是前端開發中不可或缺的一部分，它可以幫助我們美化頁面、改變頁面的結構布局等等。而今天，我們將要學習的是如何利用CSS將圖片變成灰色。

首先，我們需要在HTML中插入一張圖片：

<img src="picture.jpg">

接下來，我們需要在CSS中為這張圖片添加樣式。我們可以使用以下代碼：

img {
filter: grayscale(100%);
}

在上述代碼中，我們使用了CSS的filter屬性，參數為grayscale(100%)，意為將圖片變成100%灰色。可以通過更改100%的數值來改變圖片的灰色程度。

需要注意的是，在IE中不支持CSS的filter屬性，因此我們需要使用IE的濾鏡（filter）。以下是兼容IE的代碼：

img {
filter: gray;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
}

除此之外，我們還可以利用CSS的hover屬性，使得當鼠標懸停在圖片上時，圖片恢復原本的顏色。以下是實現鼠標懸停時恢復原本顏色的代碼：

img:hover {
filter: none;
-webkit-filter: none;
-moz-filter: none;
-o-filter: none;
-ms-filter: none;
}

在上述代碼中，我們使用了CSS的:hover偽類實現了鼠標懸停的效果。當鼠標懸停在圖片上時，filter屬性和兼容IE的濾鏡屬性都被設置為none，即恢復原本的顏色。

這樣，我們就成功地利用CSS將圖片變成灰色了。利用CSS，我們可以實現很多有趣的效果，讓我們的頁面更加生動、豐富多彩。