哔哩哔哩变灰色了（是如何进行实现的）

估计最近大家也都看到了，在浏览互联网时，很多网站首页都变成了灰色。比如百度首页、淘宝、京东、哔哩哔哩等我们常浏览的网站。一般在纪念对社会有重大贡献的任务或者大事件时，为了表达我们的尊重以及沉痛心情，将网站变成灰色进行纪念。

那么，作为一个it从业的技术人员来说，将平时色彩鲜明的网站置成灰色是如何实现的呢？是如何可以做到文字、图片、按钮所有的元素都是灰色的效果呢？

方案1：提前设计一套网站的灰色css样式，在需要的时候进行替换。显然这样做的成本太大，而且有些网站还有一些flash的动画效果，难道也要做一个黑白版本？甚至有些CG特效动画更是烧钱。

方案2：几行代码轻松搞定。

其实这个效果的实现并没有我们想象的那么复杂。在网页端按下F12，打开开发者模式，定位到html标签上，我们可以看到这样一段代码样式：

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

如果我们将这个样式取消，或者是将样式中的100%设置为0，又会恢复成网站本来的颜色配置。

那么这段代码是什么意思呢？主要看 filter grayscale(https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)是个什么东东。

grayscale 是一个 CSS 函数，可以把图像转成灰色，参数是个百分比，结果返回一个 filter 函数。目前的主流浏览器版本都支持 grayscale 函数，比如说 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等，除了 IE。