grayscale(amount) : 对图片进行灰度转换。

amount转换值的大小，可以是数字或百分比。

当值为 100% 时，灰度最大。

0% 时与原图没有区别。

0% 到 100% 之间的值会使灰度线性变化。

amount 为空时使用值为1。

CSS代码，任选一种方式

filter: grayscale(100%);
filter: grayscale(1);

为了方便，可以在后台这样加入

<style type="text/css">
html {
    filter: grayscale(100%);
    }
</style>

适配各种浏览器

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);

filter的一些其他的特效

/*blur 模糊*/
filter:blur(2px);
/*brightness 亮度*/
filter:brightness(25%);
/*contrast 对比度*/
filter: contrast(50%);
/*drop-shadow 阴影*/
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
/*opacity 透明度*/
filter: opacity(50%);
/*grayscale 灰度*/
filter: grayscale(80%);
/*sepia 褐色*/
filter: sepia(100%);
/*invert 反色*/
filter: invert(100%);
/*hue-rotate 色相旋转*/
filter:hue-rotate(180deg);
/*saturate 饱和度*/
filter: saturate(1000%);