CSS3提供了一種簡(jiǎn)單的方法，可以將彩色圖片轉(zhuǎn)換為灰度圖像，可以通過(guò)以下代碼實(shí)現(xiàn)：

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

通過(guò)將filter屬性設(shè)置為grayscale(100%)，可以將圖像變?yōu)橥耆疑Ｕ?qǐng)注意，-webkit-filter屬性也需要設(shè)置為相同的值，以便在Safari和Chrome等Webkit瀏覽器中使用。

如果您只想讓圖像的一部分變灰，也可以使用CSS3的透明度屬性。例如，以下代碼將圖像的頂部30%設(shè)置為灰度：

img {
height: 500px;
width: 800px;
position: relative;
}
img:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30%;
background: rgba(0,0,0,0.5);
z-index: 1;
}
img:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30%;
background: url(your-image.jpg);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
z-index: 2;
}

在這個(gè)示例中，我們使用:before和:after偽元素將圖像的頂部30%覆蓋，并將:before元素的背景設(shè)置為50%不透明度的黑色。我們?nèi)缓笫褂?after來(lái)顯示完全灰色的圖像，從而模擬將圖像的頂部部分變灰。