一行代码切换全局灰色，哀悼网站

K.wuean

于 2020-04-06 14:47:07 发布

阅读量435

点赞数 1

文章标签： html css intellij idea

本文链接：https://blog.youkuaiyun.com/weixin_42356887/article/details/105343541

版权

本文介绍了一种在清明节期间将网站变为灰白效果的方法，通过简单的CSS代码实现全局色彩调整，以示哀悼。文章提供了兼容多种浏览器的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相信不少盆友都会发现，清明节的时候大部分的网站都变成了灰白色，例如某度，某哔，某SDN，悼念我们的英雄、先辈们。可能大家会好奇，这么大的网站是怎么做到全局灰白的呢？一个一个组件换样式吗？反正天真的我是这样想的，直到无意中看到了一行代码，跟大家分享一下。

html{filter: grayscale(100%);}

随便拿了一个自己的项目试了一下
在这里插入图片描述
代码写成这样就可以了

<header>
	<style>
        html{ filter: grayscale(100%); }
    </style>
</header>
<body>
...
</body>

当然，不同的浏览器可以会出现兼容问题，参考某SDN，得出已下代码

        html{

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

            filter: grayscale(100%);

            -webkit-filter: grayscale(100%);

            -moz-filter: grayscale(100%);

            -o-filter: grayscale(100%);

        }