目前,搜索引擎上的代码都比较老了,加过会出现不起作用,因为很多使用了css3的渲染. 用下面代码可以解决一切问题
在head之间,未引用css文件之前加入
<style>
html{
-webkit-filter: grayscale(); /* Chrome, Safari, Opera */
-ms-filter: grayscale();
-moz-filter: grayscale();
filter: gray; /* IE 6-9 */
}
</style>
网页瞬间变黑色了
关于grayscale滤镜
其中grayscale（）的取值为0%-，也可以用0-1取代，0%代表彩色图像，代表完全的灰度。
css filter的浏览器兼容情况如下，Chrome31+，Safari7+，Opera20+，ios Safari6+,Android Browser4.4+,Blackberry 10+均支持了-webkit-filter的方式，IE不支持，firefox不支持。
接到需求，开始是想改样式和图片，但是想着512当时那么多网站都改变过，一定有简便一点的方法，到网上看了几篇帖子，大多都是改样式的，只有一个是用js实现的，而且可以实现全局效果（大快我心），兼容性也很好（在Opera 9，FF2 / 3，Safari 4，IE6 / 7中成功测试）测试后只是加载效率低了点，其他没别的问题。这就是grayscale.js，通过修改网站背景、动态改变图片（这也是问什么它效率低的原因）生成黑白网站效果。小型网站展示为主的可以用它，多图或对加载时间敏感的网站不推荐这种方法（老实写样式吧）。使用grayscale.js的方法很简单：
引入js文件
<script src="https://j11y.io/demos/grayscale/grayscale.js"></script>
选择器选择要改变的地方
//选择器可选任何元素、任何你想改变的块或这个页面
//原生js
grayscale(document.getElementById("gray"));
//或用jq
grayscale($("body"));
