一、特殊时期网站都变成了灰色,是怎么做到的
昨天打开各个网站，发现网页都变成灰色了。今年国家经历了非常惨痛的时刻，有很多烈士英雄保卫人民的安危遇难，昨天全国下降半旗，深圳时间10点全国默哀三分钟，来致敬英雄们。为了深切哀悼在抗击新冠肺炎斗争中的牺牲烈士和逝世同胞，4月4日0点起，全国多家网站和移动端，比如百度、优酷、爱奇艺、哔哩哔哩、抖音、快手、斗鱼和CSDN等平台给出公告称：2020年4月4日全国性哀悼活动期间，停止今天一切公共娱乐活动。
随便打开这些任何一个网站，全站的内容都变成了灰色，包括按钮、图片等等。相信这时候从事程序开发的粉丝可能会好奇这是怎么做到的呢？
其实解决方案很简单，只需要几行代码就能搞定了。从事前端开发的朋友会以为所有的内容都统一换了一个CSS样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。如下图，有一个灰色样式：[filter:grayscale(100%);]，也许就是这一个样式控制着整个网页显示效果。
现在试着关掉这个样式，会发现整个csdn页面恢复了往常的红色主题，包括网站logo、图片和按钮都恢复了。
总结上面的实验效果，果然是这个样式在起作用，而且是全局的效果，因为它是作用在了html这个节点之上的。只要修改这部分CSS代码：
html{webkit-filter:grayscale(100%);filter:grayscale(100%);}
当然这种修改CSS的方式还有很多，我们可以在Mozilla发布的样式效果测试平台上看看filter这种不同层叠样式效果。
平台地址：developer.mozilla.org/zh-CN/docs/Web/CSS/filter
通过这几个用力可见通过filter样式改变了图片、颜色、模糊、对比度等等信息。官网介绍了一些语法：
filter:url("filters.svg#filter-id");
/*<filter-function>values*/
filter:drop-shadow(16px16px20pxblue);
filter:contrast(175%)brightness(3%);
filter:<filter-function>[<filter-function>]*|none
如果对层叠样式感兴趣的朋友可以阅览下官网的说明文档：
developer.mozilla.org/en-US/docs/Web/SVG/Element/filter
除了这些开发样式调整的方法以外，还可以走系统架构角度解决网页的显示问题，通常很多大型网站都用上了反向代理nginx服务器，所有网站访问，都要通过nginx代理去访问到网页内容。
既然这样，统一在nginx服务器上做一些配置也是可行的，之前某大神的博客说“在Nginx负载均衡服务器上，利用sub_filter指令在输出的HTML中增加一行如下代码：
<styletype="text/css">html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</style>
二、如何使整个网站网页变成灰色
发布于2013-11-08 22:36最佳答案
<script language=JavaScript
document.body.style.filter="progid:DXImageTransform.Microsoft.BasicImage(GrayScale=1)";
方法二：把网页变成灰色显示的最简单的代码是在head之间加入如下代码：
html{FILTER: gray;}</style方法三：把网页变成灰色显示的另外一种方法是在head之间加入如下代码：
<style type="text/css"<!--BODY{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}--</style方法四：如果你的网站已经有CSS文件，那么只需要加入如下代码即可：
html{ filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
方法五：我比较推荐这种做法，在CSS文件中加入如下代码即可：
html{ filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
方法六：如果网站的CSS中已有BODY{}，那么直接加入如下代码即可：
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);比如：BODY{font-size: 12px; margin: 0px; coclor:#000; background:#fff;
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
在运用以上方法进行网页更改的时候，可能会遇到以下的问题，具体的解决方法仅供参考：
三、微信头像如何变灰
1、步骤一：打开微信，点击右下角的【我】，点击微信头像。点击你的头像。点击右上角的【】。点击保存到手机。
2、步骤二：打开手机自带的相册，找到刚刚保存的头像，点击打开。点击编辑。点击增强。点击饱和度。往左拉，拉到最左边。点击【√】。点击保存。这样就把头像变成灰色了。
3、步骤三：选择灰色头像。点击确定即可把微信头像变成灰色。
4、头像指肩部以上的人像或于网站及社交平台上用于仅做标识的图片。在拍摄头像的时候，除了拍摄一些比较活泼的个性神态之外。一张比较正规的类似证件照风格的照片肯定是必不可少的。拍摄这种照片一方面可以打开一些相机内置的网格功能，做到横平竖直，这样拍出来才能够显得比较正规。可以把眼镜的水平线，耳朵的水平线，以及嘴巴鼻子作为参照物来调整。并且在拍摄的时候，可以把取景框尽量地放大一点，多留出一些背景，这样为后期处理留出更大的余地。
好了，文章到此结束，希望可以帮助到大家。
