4月4日网站变灰色的效果是怎么实现的？

4月4日时，很多网站包括主页和内容（包括图片、按钮等）也都已经变成了灰色。当天我打开的csdn、人人视频都全部变为了灰色。

我当时第一想法是难道把这些图片都换了一遍吗？？？但是成本未免太高，且可能会有疏漏。今天在公众号里看到了一篇推文的详细解释，记录一下。

一、实际的解决方法：（仅对于网站）

加一个全局的CSS样式。加在最外层的html上。

html {-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);filter: grayscale(100%);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

二、什么是Filter — 滤镜？

filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

通过 filter 样式改变了图片、颜色、模糊、对比度等等信息。
灰色图像，这里其实就是设置了 grayscale，其用法如下：

filter: grayscale(percent)

将图像转换为灰度图像。值定义转换的比例。percent 值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘子。若未设置，值默认是 0。另外除了传递百分比，还可以传递浮点数，效果是一样的。

如：

filter: grayscale(1)
filter: grayscale(100%)

都可以将节点转化为 100% 的灰度模式。

所以一切到这里就清楚了，如果我们想要把全站变成灰色，再考虑到各浏览器兼容写法，可以考虑如下写法：

.gray {-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);filter: grayscale(100%);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

这样想要变灰的节点只需要加上 gray 这个 class 就好了，比如加到 html 节点上就可以全站变灰了。

三、各浏览器对filter的兼容性

除了 IE，其他的 PC、手机端的浏览器都支持了，Firefox 的 PC、安卓端还单独对 SVG 图像加了支持。

四、APP中是怎么实现的？

摘自：公众号下方的留言

有些资源是从Web接口获得的，比如banner，缩略图，小图标等。如微博。

某些颜色或者样式配置也是从接口获得的，是可配置的。

一些APP内嵌的Web页面，和网页原理是一样的。

参考文章：今天网站都变成灰色了，这其中是怎么实现的？

4月4日网站变灰色的效果是怎么实现的？相关推荐

4月4日网站变灰实录
4月4日网站变灰记录基本都是通过 grayscale 来实现的都不支持 IE 11 但在 IE 11 的情况下表现却各不相同 B站.A站.淘宝.京东.百度.虎扑.开源中国 B 站 html.gra ...
html 图片灰色,网站变灰色兼容代码包括图片支持所有浏览器
一般在全国哀悼日,大地震的日子,清明节,我们都会让自己的网站全站灰色,以表示对逝者的悼念.那么下面分享几种方法 1.直接body中加入代码即可实现这种效果很简单,只需要一句css代码:filter: ...
老板：你也把咱们网站弄成灰色——网站变灰色如何实现
从昨天下午开始,我们打开各种网站后都是灰色的,我们讲解一下如何用技术手段使网页变灰色. //分析:我们网站的元素大多数都是img标签和其他文字行标签,文字我们直接使用color:#ccc就可以更改,图 ...
我的SEO之路2013年1月21日网站被K
12月21日. 今天习惯性的打开网站统计突然发现IP少的可怜. 不知道什么原因站长工具查看了下. 被k 7个首页关键字全部被k 100名以外. 伤不起蛋疼. 各种无奈. 就过了个周末.就悲剧了. ...
全国哀悼日，怎么让网站变灰色？？？
今天(2020年4月4日),全国和驻外使领馆下半旗志哀,全国停止公共娱乐活动,深切悼念新冠肺炎疫情牺牲烈士和逝世同胞.从北京到海南,从长江岸边到黄浦江畔,从渤海之滨的津沽之地到西部边陲的红其拉甫,国旗 ...
怎么让网站变灰色，我们该怎么做？
全国哀悼日,我们会让网站全站灰色,以表示对逝者的悼念. 腾讯网的做法: <style> body *{ -webkit-filter: grayscale(100%); /* webkit ...
实现类似QQ离线用户头像彩色变灰色的效果
头像由彩色变灰色有两种实现方式: 方法1把图片彩色图转换为纯黑白二色: /*** 将彩色图转换为纯黑白二色* * @param 位图* @return 返回转换好的位图*/private Bitmap ...
网站变灰色(默哀专用)(转)
如果用传统的方法将网站变成黑白色非常的麻烦,需要更换页面的文件,并且要对图片进行更改.如果你的网站是用CSS的话,那就很简单了,只要是符合w3标准的网页,在CSS文件的最前面加上一行代码就可以了,这段 ...
公祭日网站变灰白色效果
四天前 · 星期六 · 清明节 2020年,一个很不平凡的年度.鼠疫.新型冠状病毒肺炎和就在清明节前夕的西昌山火.在这一段时间里我国经历很多惨痛的时刻,很多英雄"逆向而行"去到 ...