CSS3滤镜处理

1、黑白灰度

html {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);  // 值在0%到100%之间；值为100%则完全转为灰度图像，值为0%图像无变化。
}

2、模糊程度

html {
  -webkit-filter: blur(4px);
  filter: blur(4px);  // 值越大越模糊；单位px，不接受百分比%。
}

3、色相饱和度

html {
  -webkit-filter: saturate(50%);
  filter: saturate(50%);  // 值为0%则是完全不饱和，值为100%则图像无变化。
}

4、反转输入图像

html {
  -webkit-filter: invert(100%);
  filter: invert(100%);  // 100%的价值是完全反转。值为0%则图像无变化。
}

5、图像转换为深褐色

html {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);  // 值为100%则完全是深褐色的，值为0%图像无变化。
}