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快速简单地将彩色照片转换为黑白照片，并使照片具有动画效果，与此同时也提高了图片效果。