在網頁設計中，有時需要對圖片進行處理，讓其呈現出一種灰色的效果。這種效果通常使用 CSS 技術來實現，下面我們就來詳細介紹。

首先，在 HTML 文件中，為了讓 CSS 能夠作用于圖片，需要使用<img>標簽，這樣才能對圖片進行處理。例如：

<img src="xxxx.jpg" alt="圖片" class="gray-img">

其中，src屬性表示圖片的路徑，alt屬性表示當圖片無法加載時所顯示的文本內容，class屬性用于指定對該圖片進行處理的 CSS 類名，這里我們取名為「gray-img」。

接下來，需要在 CSS 文件中定義「gray-img」的樣式，使該圖片呈現出灰色的效果。我們可以使用filter屬性來實現：

.gray-img {
filter: grayscale(100%);
}

在這里，grayscale屬性用于指定應用于圖片的灰度值。該屬性的值范圍為 0%（原始亮度）到 100%（完全灰度）。在上面的代碼中，我們將灰度值設置為 100%，使圖片完全變為灰色。

通過以上的設置，當我們在瀏覽器中查看頁面時，該圖片就會呈現灰色的效果。這種處理方式不僅簡單易用，而且在網頁設計中也經常被運用到。