用GTM就能3分钟内把网站变成灰色，这事还要什么网站开发

Plato 数字营销

修改于 2022-06-15 12:38:57

4840

修改于 2022-06-15 12:38:57

文章被收录于专栏：Google Ads

每逢重大灾难事件，国内很多网站将设计变成灰色，以示哀悼之情。整个网站变灰色是怎么实现的？如果网站已经安装了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中：

<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>

注意：除上面的代码外，还有其他方式的代码也可以实现，例如 Javascript 代码，不过我喜欢用上面的 Style 来直接添加 CSS 样式。

通过网站管理把网站变成灰色

万一没有安装 GTM，或者无论如何配置也搞不定，可以直接在网站管理后台安装上面的代码，效果相同。

绝大多数网站管理后台都有一个类似于“第三方代码”的管理功能，通常默认会把添加的“第三方代码”放在 <head> 标签中。也有一些网站提供更完善的第三方代码管理功能，例如可以选择把代码安装在 <head> 、 <body> 或 <footer>中。如果你遇到，请选择安装在<head> 中。