接到了个小活，其中就有一个需求是利用 CSS 样式代码将图片变灰，这个需求很只需要使用 CSS filter 属性中的 greyscale 值即可，下面具体的来说一下。

css3 中 greyscale 是 filter 中的一种属性，可以对HTML元素进行灰色滤镜，它的用法也非常的简单，并可以适用于a，div，img，svg 等HTML元素！

HTML代码：

<img src="s.png" class="gray_img" />

CSS代码：

.gray_img{
    -webkit-filter: grayscale();
    -moz-filter: grayscale();
    -ms-filter: grayscale();
    -o-filter: grayscale();
    filter: grayscale();
    filter: gray;
}

演示样式