整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家肯定注意到，很多网站变成灰色，原因都知道，是为了纪念一位伟人。
比如我们打开百度，界面如下：
这种把整个页面都变成灰色，是怎么做到的呢？
对前端开发有经验的同学，也许会说换一套灰色的模板UI。
显然是不可能的，网站上元素这么多，而且一直在迭代新功能，都改成灰色成本太大了，所以一定有另一种非常快速的方法。
在浏览器按下F12，我找到了答案。
body上多了一个名为big-event-gray的样式。
名字很好理解，大事件灰色，所以就是它了。
于是找了下这个样式的定义，代码如下（为方便阅读，我格式化了一下）：
关键是这个grayscale函数，这是一个css函数，可以直接把图片转成灰色。
网页实现灰色相对简单，但是APP就比较复杂了。
随便打开几个APP，会发现一般只有首页是灰色的，打开新的页面还是原来的配色。
原因是APP每个页面的样式都是独立的，除非开发功能的时候就统一读取公共的参数设置颜色，但是刚才也说了，那成本太高了。
点个“在看”，缅怀伟人，永垂不朽。
色显示百度首页
今天早上醒来一看各大网站，为表示新冠肺炎疫情死难者的哀悼，各大网站均将页面变为灰色显示，显示的极为庄重肃穆。本文主要介绍常用网页页面快速变灰色的方法。
对于网页而言，页面色彩、布局等主要受到层叠样式文件CSS控制，网站页面整体色彩的改变可以通过CSS进行整体的控制。在CSS中可以通过filter滤镜属性实现对网页元素进行图像、背景及素材的渲染。
Filter调整测试Demo
如上图所示，通过设置Filter的属性取值，实现对颜色色彩的控制。主要属性说明如下：
1、filter: blur()方法
该方法主要用于实现对图像设置高斯模块，及屏幕上的像素融合程度即模糊程度。其参数需要以像素值形式进行提供。参数值越大模糊程度越高。示例如下图：
网页中显示的图标
在未使用filter属性未设置时，显示的原始图片效果如上图所示。我们可以进一步对页面添加style样式调整filter blur参数值，可实现页面的模糊程度。如blur参数取值为2个像素，效果如下：
blur参数取值为2显示效果
2、filter: grayscale()方法
该方法是用于实现页面变灰的主要方法，主要用于设置页面显示的灰度。参数值需要以百分比形式进行提供，0%表示未进行灰度调整，100%表示将页面完全转化为灰度。我们还是以图标为例，对其进行灰度设置进行说明。当灰度取值设置为20%时效果如下图1所示，当灰度值设置为100%时效果如图2所示：
图一：灰度20%设置显示效果
图二：灰度100%设置图片显示效果
使用filter提供的 grayscale()方法对页面进行灰度设置实现效果描述如上图，我们可以快速实现将页面快速变灰。目前浏览器的内核型号较多，对CSS的支持与解析情况不相同，在进行页面灰度处理时需要考虑到用户终端浏览器的类型，需要进行CSS样式的兼容性设置。实现基本代码描述如下：
-webkit-filter: grayscale(100%);
//(Apple Safari内核)
-moz-filter: grayscale(100%);
//(Firefox浏览器)
-ms-filter: grayscale(100%);
//(Internet Explorer（IE）浏览器)
-o-filter: grayscale(100%);
//(Opera浏览器)在明确网页变灰所需使用滤镜效果之后，我们可以使用其属性进行页面变灰效果。以下给出本人编写的一个简单Demo进行变灰测试，原始页面效果如下：
测试原始页面
按照编码要求，我们在该页面头部<head>编写样式文件，实现变灰处理，所添加代码描述如下：
变灰实现代码
在页面添加变灰代码之后，我们可以看出明显的变灰效果，效果描述如下：
页面变灰实现效果
本文给出了网页页面变灰的实现简单方法，作为网页设计人员、前端开发人员应当能够掌握基本使用方法，实现页面的快速改变。
家看到网站的内容都变成了灰色，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？
有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是变成生产事故要扣奖金了。
百度：
百度
京东：
京东
：
慕课网：
慕课网
给大家总结出一段规范的代码，把这段代码加入网站页面的CSS里面即可实现页面变成灰色的效果：
规范代码
filter是滤镜的意思，filter:gray的意思就是说给页面加上一个灰度的滤镜，所以html里面的所有内容都会变成黑白的了。不过这个滤镜对于chrome和safari浏览器是无效的，所以下面会有一行-webkit-filter: grayscale(100%);
一、blur(px)高斯模糊
给图像高斯模糊。如果没有设定值，则默认值是0；这个参数可设置css长度值，不接受百分比值
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}二、brightness(%)亮度
使图像看起来更亮或更暗。值是100%，图像无变化，超过100%，变亮，小于100%，变暗。
filter: brightness(150%)三、contrast(%)对比度
filter: contrast(200%)四、drop-shadow(x y blur speed color) 阴影效果
filter-shadow: (50px 50px 5px tomato)与box-shadow效果上有显著的区别
五、grayscale(%)灰度
filter: grayscale(100%)六、hue-rotate()色相旋转
filter: hue-rotate(100%)七、invate(%)
反转输入图像。值为100%是完全反转。 值为0%则图像无变化。0%~100%之间，则是效果的线性乘子。
filter: invate(100%)八、opacity(%)
转化图像的透明度。值为0%则是完全透明。值为100%则图像无变化
filter: opacity(100%)九、saturate(%)
转换图像的饱和度。值为0%则是完全不饱和，值为100%则图像无变化。值允许大于100%，会有更高的饱和度。
filter: saturate(100%)十、sepia(%)
将图像转为深褐色。值为100%则完全是深褐色
img {
-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
filter: sepia(100%);
}十一、复合函数
使用多个滤镜，每个滤镜使用空格分割。
注意：顺序是非常重要的（例如使用grayscale()再使用sepia()将产生一个完整的灰度图片）
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */
filter: contrast(200%) brightness(150%);
}*请认真填写需求信息，我们会在24小时内与您取得联系。
