每逢重大灾难事件，国内很多网站将设计变成灰色，以示哀悼之情。整个网站变灰色是怎么实现的？如果网站已经安装了GTM代码管理器，你自己3分钟内就能把网站变成灰色。
利用GTM代码管理器把网站变成灰色
GTM代码管理器（Google Tag Manager）是一个 Google 官方工具，安装到网站后，可以用来添加和管理第三方代码段。GTM代码管理器就像“中间人”，用于连接网站和其他第三方代码。所以只安装GTM没有任何作用，需要在GTM中配置第三方代码后才能发挥作用。
在 Google 官方的GTM代码管理器帮助中心有更多介绍，例如：设置和安装跟踪代码管理器。
将网站变成灰色，方式很多，但归根到底都是通过添加CSS灰色滤镜来改变网站元素的显示。所以你不需要修改现有的任何彩色元素，只需要几行代码即可。
简单三个步骤即可将整个网站变成灰色：
- 在GTM中新建一个
Custom HTML的Tag，Triggering 选择 All Pages，意思是对网站上的所有页面有效 - 复制粘贴下面的代码到
HTML输入框内，这段 style 将添加 CSS 样式 - 点击右上角 Submit 发布修改后的 GTM，刷新网站就可以看到效果了
复制以下代码到新建的Tag中：
代码语言：javascript复制<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>
GTM就能3分钟内把网站变成灰色注意：除上面的代码外，还有其他方式的代码也可以实现，例如 Javascript 代码，不过我喜欢用上面的 Style 来直接添加 CSS 样式。
通过网站管理把网站变成灰色
万一没有安装 GTM，或者无论如何配置也搞不定，可以直接在网站管理后台安装上面的代码，效果相同。
绝大多数网站管理后台都有一个类似于“第三方代码”的管理功能，通常默认会把添加的“第三方代码”放在 <head> 标签中。也有一些网站提供更完善的第三方代码管理功能，例如可以选择把代码安装在 <head> 、 <body> 或 <footer>中。如果你遇到，请选择安装在<head> 中。
为什么我的网站没有变成灰色？
上面两种方式二选一即可，如果设置后网站没有变成灰色，建议直接找网站开发同事解决。
本文链接：用GTM就能3分钟内把网站变成灰色，这事还要什么网站开发
