林三在线

百度了一圈发现好用的不多，为了方便更多的老铁操作，我总结了下可行的方案，供大家参考。

先说百度里面找到的，关键词：网站变灰代码；时间：2020年4月4日。首先看到的是一篇百度经验，因为这里面有分成，所以里面的内容相对一般网站质量偏高，参考地址（不保证时效性）：传送门 。我把主要的内容整理如下：

方法一、wordpress 只要在你的css头部加下面这段代码就可以了。

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

方法二、其它网站参考下面的方法。

只要是符合w3标准的网页,在CSS文件的最前面加上一行代码就可以了,这段代码使用的是CSS滤镜,将网页中的色彩部分过滤掉。html { filter:progid:DXImageTranorm.Microsoft.BasicImage(grayscale=1); }

方法三、加载 grayscale.js 这个文件，这个文件百度一下下载一个传到你的网站就可以，然后在网站头部调用代码。

<script src=”grayscale.js” type=”text/javascript”></script> <script type=”text/javascript”> window.onload=function(){ grayscale(document.body); } </script>

林三亲测，方法一用我的 wordpress 网站确实生效了，这基于 wordpress 程序的标准化设计；方法二在我的 typecho 上没有起作用，好像是被默认css设置给覆盖了，无论放在哪里都没法显示；方法三的变灰css（51jb下载地址：传送门）实测有效，但是对于外链的图片（如全球通用头像）和广告的图片（如百度百青藤联盟）并没有变灰，并且还有副作用：网站加载慢2秒，变灰效果只有在加载完之后才会显示。针对方法二，林三再次探索后找到实现网站变灰的可用代码：

赶快去试试吧，如果没有效果，欢迎在下面留言交流。（强烈不推荐方法三，加载这个js太影响效率…）