干了七年建站，我见过太多老板一听到“全站变灰”就慌神。

尤其是逢年过节，或者遇到什么特殊纪念日，客户突然发来消息：“那个...咱们网站能不能也变灰啊？显得有诚意。”

这时候很多新手站长或者外包公司，第一反应就是去改 CSS 代码，或者找插件。

结果呢？改完发现图片没变灰，视频还是彩色的，甚至连后台登录框都灰得看不清字了。

今天我就掏心窝子说说，怎么把网站设置成灰色，而且不伤元气，还不花冤枉钱。

先说结论：别去动核心代码，别去改图片。

最靠谱、最通用的办法，就是加一行 CSS 滤镜。

这招我用了五年，从 WordPress 到定制开发，全都能用，而且效果一致。

具体怎么做？很简单。

找到你网站的 header.php 或者全局 CSS 文件，在 head 标签里加上这么一段代码：

html

html {

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: url("data:image/svg+xml;utf8,#grayscale");

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

}

这段代码的意思很简单，就是把整个页面的颜色饱和度降到零。

注意，是页面整体，包括背景、文字、甚至你上传的那些花花绿绿的 Banner 图。

这样做的好处是，不用一张张去替换图片，不用一个个去改颜色值。

省时，省力，还不容易出错。

但是，这里有个大坑，很多人踩了都不知道。

那就是视频。

如果你的首页有自动播放的视频，或者嵌入的 YouTube、Bilibili 视频，CSS 滤镜有时候罩不住。

这时候，视频还是会显示彩色。

这就很尴尬了，明明想表达哀悼或庄重，结果中间蹦个彩色视频，显得特别突兀，甚至有点滑稽。

所以，如果网站有视频，建议在变灰期间，直接把视频暂停，或者替换成静态封面图。

别嫌麻烦，细节决定成败。

再说说价格。

如果你找外包公司做这个，他们可能会报价 500 到 2000 不等。

为什么？因为他们要收“技术服务费”，还要算工时。

但实际上，这就是一行代码的事。

如果你自己懂一点技术，或者让公司的程序员顺手加一下，成本为零。

如果你不懂，别怕，把这段代码发给你的开发，让他加在合适的位置，十分钟搞定。

千万别信那些说什么“需要重新编译主题”、“需要安装付费插件”的鬼话。

那是忽悠小白呢。

当然，也不是所有情况都适合全站变灰。

如果你的网站是电商类，或者主要靠色彩吸引眼球，变灰可能会影响转化率。

这时候，可以考虑只把头部导航变灰，或者只在特定页面加灰。

但这需要更精细的操作，比如针对特定 class 加滤镜。

不过对于大多数企业官网来说，全站变灰是最稳妥的选择。

最后，我想提醒一点。

变灰只是形式，心意才是关键。

别为了变灰而变灰，搞得网站加载变慢，或者出现乱码，那就本末倒置了。

测试一定要做足。

在 Chrome、Firefox、Safari 甚至 IE 浏览器上都看看效果。

特别是手机端，有些老旧手机对 CSS 滤镜支持不好，可能会显示异常。

这时候，可能需要用 JS 来检测浏览器兼容性，如果不支持，就保持原样。

别偷懒，别觉得“差不多就行”。

客户看一眼，就知道你专不专业。

好了，方法都在这了。

如果你还是搞不定，或者担心改坏了影响 SEO，别硬撑。

找个靠谱的人帮你看一眼，比你自己瞎琢磨强得多。

毕竟，七年经验换来的教训，就是别在小事上栽跟头。

有问题随时聊，咱们不玩虚的。

本文关键词：网站设置成灰色