如何通过filter技术实现网站全站灰度处理？

本文共计1598个文字，预计阅读时间需要7分钟。

前言+政府网站会在国庆节的时间遇到公祭日的特殊情况，网站整体颜色会变灰。今天正好调整了一下。在此将解决方案分享给家长。方案简单实用，笔者已在生产环境使用过。通过整体的使用filter来实现变灰。

前言

政府网站会遇到公祭日的时候，网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大家。方案简单实用，笔者已在生产环境使用过。通过整体的html使用filter来进行过滤。如下，只要引入即可。

解决方案

html { filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray; filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

IE11 和 IE10的解决方案

经过测试发现，以上代码的方式对于谷歌，火狐，IE8，9都很好使。对于IE11和IE10效果不奏效。于是我们采取另一种方式，通过引用grayscale.js来使用。由于不能上传文件，在此将grayscale.js的代码写下来。