一行代码让你的网站变灰进入哀悼模式

2020-04-03 · Ryan · 发表评论

深切哀悼在抗击新冠肺炎斗争中的牺牲烈士和逝世同胞，愿逝者安息，愿生者奋发，愿祖国昌盛。

让我们一起接力，一起变灰，一起哀悼。

网站变灰的方法很简单，一行代码就能搞定。

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

使用方法

将上面的 CSS 代码，加入到网站主题的 style.css 文件开头，或者通过自定义 CSS 功能添加即可。

补充说明：

核心属性是 filter: grayscale(100%);，它可以将整个页面的色彩转换为灰度。
-webkit-filter 是针对旧版 WebKit 内核浏览器（如旧版 Chrome、Safari）的前缀，现代浏览器通常已支持标准的 filter 属性。
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 是针对旧版 IE 浏览器（IE 6-9）的兼容写法。
为了达到最佳兼容性，建议同时保留这三行代码。
此方法会影响页面上的所有元素，包括图片、视频和背景。

注意：代码中的 {5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3} 是原文的编码错误，已修正为标准的百分比符号 % 和属性值。