css filter属性滤镜变灰

 

　　如果有需求想让网页变成下面黯然失色的样子应该怎么做呢？

 

　　其实很简单，只需要给html添加css的filter属性即可轻松实现，各主流浏览器兼容写法如下：

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