这里展示几种filter对图片颜色的处理方式

灰度

利用filter: grayscale()函数实现，该函数参数为0%到100%百分值，超出范围值无意义，如下：第二幅图是添加了filter: grayscale(70%)的效果

.gray {
  filter: grayscale(70%)
}

亮度

利用filter: brightness()函数实现，该函数参数为0%到100%百分值，小于0无意义，大于1则会比原图更亮，如下：第二幅图是添加了filter: brightness(2);的效果

对比度

利用filter: contrast()函数实现，该函数参数为0%到100%百分值，小于0无意义，大于1则会比原图对比度更高，如下：第二幅图是添加了filter: contrast(200%);的效果

饱和度

利用filter: saturate()函数实现，该函数参数为0%到100%百分值，小于0无意义，大于1则会比原图饱和度更高，如下：第二幅图是添加了filter: saturate(200%);的效果

透明度

利用filter: opacity()函数实现，该函数参数为0%到100%百分值，超出范围值无意义，如下：第二幅图是添加了filter: opacity(50%)的效果