兼容IE全版本及所有市面浏览器的网页变黑白处理方式

大家应该有发现最近几天不少网站变成了黑白色，在哀悼日时，很多网站都需要全站变成黑白配色，今天对这个实现的技术做了一些探索性了解，在此进行一个记录分享。

使用的样式部分：下面的css部分想必大家应该都可以看懂，主要是对主流的谷歌内核浏览器和小众些的品牌浏览器做整体的网页图片处理，IE浏览器除了IE10和11基本都做了覆盖。

css代码：

<style>
*,html{
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter: gray;
}
</style>

那么大家关注的IE10和IE11怎么处理呢？

今天对这个问题做了详尽的了解，其中包括多种方法，不过最后都不满意，有的确实也做到了，不过种种瑕疵被舍弃了。

突然想到翻一翻其他大厂或网站的做法，于是又找寻了一段时间，发现南京市某部门网站的做法挺不错，对这个问题交出了正确的答卷，在此分享给大家。

在这里整理成了一个js压缩文件，方便大家预览和引入使用（建议保存到自己服务器后再引用）

<script type=”text/javascript” src=”https://www.cnblogs.com/brad93/p/https://blog-static.cnblogs.com/files/blogs/764492/grayscale-min.js“></script>

当然了，如果你对实现的过程更感兴趣，这里提供js源代码给大家：

<script type=”text/javascript” src=”https://www.cnblogs.com/brad93/p/https://blog-static.cnblogs.com/files/blogs/764492/grayscale.js“></script>

注意：如果你引入到自己页面后发现并木有生效，可能有以下原因，排除掉就好了：

1、按照方法引入的js没被下载使用

因为上面用博客园上传的，你引入时被博客园服务器拒绝了，所以推荐大家放到自己服务器上，然后再引入网页。

那如果“我就要用博客园的怎么搞？”

请在网页上方添加这个参数：<meta name=”referrer” content=”never”>

2、引入了js发现网页里有的图片在IE10或IE11中怎么还是彩色的？

请检查一下图片的url，看是不是引用的域名不属于当前页面的父级网址，比如网页引入了百度的logo，跨域的话是不行的，当然，如果有大佬可以将这个js改为支持跨域处理的，欢迎分享出来供大家使用。

上述就是今天的成果，将css和js文件同时结合使用，便能做到全覆盖的兼容各个浏览器进行网页变黑白啦，感谢你长得这么帅&美还看完了本文~