CSS可以通過幾行代碼很容易地將彩色照片變為黑白照片。這是因為CSS中有一種屬性可以控制圖像的飽和度，即saturation屬性。在使用此屬性時，添加一個值為0的css規則可將圖像轉換為黑白顏色。

img{
filter: grayscale(100%);
}

上述代碼中grayscale像素讓圖像的飽和度降至0.黑白效果由CSS的grayscale濾鏡完成。 也可以使用CSS3選擇器，以添加CSS3漸變。漸變用于黑白圖像的柔和過渡，從而使黑白圖像看起來更自然。

.img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.img:hover {
-webkit-filter: grayscale(0%);
filter: none;
}

上述代碼是使用了鼠標懸停時的漸變效果，使用CSS3的過渡函數，設置圖像的飽和度和動畫的持續時間。當鼠標懸停在圖像上時，飽和度又被恢復回來。 通過這些簡單的代碼，您可以用CSS快速簡單地將彩色照片轉換為黑白照片，并使照片具有動畫效果，與此同時也提高了圖片效果。