最近几天，大家有没有发现大部分网站都瞬间变灰色了由于我们敬爱的江泽民同志患白血病合并多脏器功能衰竭，抢救无效，于2022年11月30日12时13分在上海逝世，享年96岁国家降半旗，几乎所有的知名网站，首页都变成灰色的了，来表达深切哀悼我们敬爱的江泽民同志！ 。
可能有许多小伙伴好奇这是怎样做到的？其实很简单，前端工程师们只需要一行代码就可以解决 我们只需要在网站的首页后台代码加入这么一段代码，就可以实现了！html {
filter: grayscale(100%);}如下图所示：
见变灰效果：
方法教到这里，我们就来详细了解一下这究竟是一个什么样的 CSS 样式这个样式名叫做 filter，搜下 MDN 的官方介绍，其链接为：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter。
官方介绍内容如下：filter CSS 属性将模糊或颜色偏移等图形效果应用于元素滤镜通常用于调整图像，背景和边框的渲染CSS 标准里包含了一些已实现预定义效果的函数你也可以参考一个 SVG 滤镜，通过一个 URL 链接到 SVG 滤镜元素 (。
SVG filter element[1])。其实就是一个滤镜的意思。官方有一个 Demo，可以看下效果，如图所示。
Demo比如这里通过 filter 样式改变了图片、颜色、模糊、对比度等等信息其所有用法示例如下：/* URL to SVG filter */filter: url("filters.svg#filter-id。
");/* values */filter: blur(5px);filter: brightness(0.4);filter: contrast(200%);filter
: drop-shadow(16px 16px 20pxblue);filter: grayscale(50%);filter: hue-rotate(90deg);filter: invert(75%);
filter: opacity(25%);filter: saturate(30%);filter: sepia(60%);/* Multiple filters */filter: contrast(175%)
brightness(3%);/* Global values */filter: inherit;filter: initial;filter: unset;再说回刚才的灰色图像，这里其实就是设置了 grayscale，其用法如下：
filter: grayscale(percent)将图像转换为灰度图像值定义转换的比例percent 值为 100% 则完全转为灰度图像，值为 0% 图像无变化值在 0% 到 100% 之间，则是效果的线性乘子。
若未设置，值默认是 0另外除了传递百分比，还可以传递浮点数，效果是一样的如：filter: grayscale(1)filter: grayscale(100%)都可以将节点转化为 100% 的灰度模式。
所以一切到这里就清楚了，如果我们想要把全站变成灰色，再考虑到各浏览器兼容写法，可以参考下 CSDN 的写法：.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 图像加了支持，可以放心使用就这么简单不妨大家都试一试— 完 —关注公众号后，回复下面关键词获取。
回复 加群，加入前端程序员技术交流群
回复 面试，获取最新大厂面试资料回复 简历，获取 3200 套 简历模板回复 TypeScript，获取 TypeScript 精讲课程回复 uniapp，获取 uniapp 精讲课程回复 Node，获取 Nodejs+koa2 实战教程
回复 架构师，获取 架构师学习资源教程更多教程资源应用尽有，欢迎 关注获取“在看和转发”就是最大的支持
亲爱的读者们，感谢您花时间阅读本文。如果您对本文有任何疑问或建议，请随时联系我。我非常乐意与您交流。
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。