CSS控制网站去色全灰效果如何展现？

        我们有时需要对网站进行全灰处理。那么具体的代码该如何书写呢？下面老猫把css代码写出来给大家参考一下：

        如果是需要对全站进行去色全灰展现，那么我们需要找到一个在所有页面都有应用的外部样式CSS文件，将下面这段代码贴进去：

html{undefined
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);
-webkit-filter: grayscale(1);
}

然后，就可以得到一个全站变灰的效果了。

        首页的效果：

        列表页效果：

        文章内页效果：

        如果我们只是想需要网站首页去色变灰，而其他页面仍然保持之前的样式不变，那么我们只需要在首页的文件中加入下面这段代码即可：

<style>

html{undefined
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);
-webkit-filter: grayscale(1);
}

</style>

        老猫在这里提醒一句：最好加在</head>之前，这样在页面加载的时候不会出现原始代码闪现的效果，影响访客视觉体验。

        以上这些就是网站去色变灰的代码以及效果展现，希望对各位站长有所帮助。

相关链接：【紫微星】CSS控制网站去色全灰效果如何展现？