css3属性filter设置,IE不兼容

  html {
      filter: grayscale(1);
      -webkit-filter: grayscale(1);
      -moz-filter: grayscale(1);
      -ms-filter: grayscale(1);
      -o-filter: grayscale(1);
      filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

IE浏览器使用grayscale.js，配合样式可以使界面变成灰色

html{
  filter: gray;
  color: gray;
}
<script src="grayscale.js"></script>
<script>
    grayscale(document.getElementsByTagName('html'));
</script>

filter的其他滤镜效果

    filter: blur(5px); //高斯模糊
    filter: contrast(0.5);//调整图像的对比度,100%图像不变，0%变黑,值0%-100%，浮点数0-1
    filter: brightness(%)；//给图片设置一种线性乘法，让图像看起来更亮或更黑,可以超过1，默认1
    filter: hue-rotate(deg);//给图像用色相旋转0-360deg,超出360，又回到原来的色相值了
    filter: invert(%); //反转输入图像，100%则完全反转
    filter: opacity(%); //图像透明度
    filter: saturate(%);//转换图像饱和度,可以超出100%
    filter: sepia(%);//将图像转换为深褐色，0-100%
    filter: url(svg-url#element-id);//接收一个xml文件，文件设置一个svg滤镜，可以包含一个锚点来指定一个具体的滤镜元素