四种实现WordPress网站整体变黑白/灰白效果的代码解决方案

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

温馨提示：这篇文章已超过495天没有更新，请注意相关的内容是否还可用！

一般情况下一个网站出现整体效果黑白或者灰白效果的时候，多是由于发什么什么重大的事情或者悼念一些人或事物。在今年的时候由于特殊原因 wordpress 网站也为了沉重悼念在抗疫过程中牺牲的人员进行了网站整体变灰效果。以下是收集整理并测试可用的代码，现在分享给大家，顺便学习下 CSS 样式的使用方法。

第一种网站变黑白方法：

在 style.css 文件顶端添加下行代码即可，有些 WordPress 网站主题有自定义 CSS 样式功能，可以直接把代码粘贴进行保存即可。

1
html {filter: Progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }

第二种网站变灰度方法：

将以下代码放入 </head> 前即可让对应网页变黑灰色！

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

第三种网站变灰色方法：

如里上面的两种方式都不喜欢，可以通过修改 <html> 标签，以加入内联样式的方法，达到网页变灰的效果。

1
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);">

第四种网站整体变灰方法：

1
2
3
4
5
6
7
8
9
body *{
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter:gray; /*ie9- */
}