css3 哀悼日网站全站变灰代码

时间：

2020-04-03

分类：

css3

字数：

951 字

时长：

大约需要 4 分钟

次数：

0 人阅读

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院决定，2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。各网站、新媒体必须使用黑白页面。

这里说说如何使网页变为黑白效果，所谓置灰。

网上各种方式都有 js css nginx 等，但万变不离其宗，都是使用 css3 grayscale 滤镜效果实现。

例子：置灰效果未置灰效果

CSS 添加方式

核心代码：

body {
  /* FF4.0变色 */
  filter: url("data:image/svg+xml;utf8,<svg%20xmlns=\'http://www.w3.org/2000/svg\'><filter%20id=\'grayscale\'><feColorMatrix%20type=\'matrix\'%20values=\'0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200\'/></filter></svg>#grayscale");
  /* chrome 变色 */
  -webkit-filter: grayscale(100%);
  /* firefox */
  -moz-filter: grayscale(100%);
  /* edge */
  -ms-filter: grayscale(100%);
  /* opera */
  -o-filter: grayscale(100%);
  /* w3c */
  filter: grayscale(100%);
  /* IE变色 */
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -ms-filter: gray;
  /* IE9- */
  filter: gray;
}

JS 添加方式

好处：可控制显示时间，比如下面代码，控制在 2020-04-04 00:00:00 到 2020-04-05 00:00:00 网页显示灰色效果。

// 降半旗页面置灰
if ((new Date()).getTime() > 1585929600000 && (new Date()).getTime() < 1586016000000) {
  // FF
  document.body.style['filter'] = 'url("data:image/svg+xml;utf8,<svg%20xmlns=\'http://www.w3.org/2000/svg\'><filter%20id=\'grayscale\'><feColorMatrix%20type=\'matrix\'%20values=\'0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200\'/></filter></svg>#grayscale")';
  /*IE变色*/
  document.body.style['filter'] = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
  document.body.style['filter'] = 'gray';
  document.body.style['-ms-filter'] = 'gray';
  /*谷歌变色*/
  document.body.style['-webkit-filter'] = 'grayscale(100%)';
  document.body.style['-moz-filter'] = 'grayscale(100%)';
  document.body.style['-ms-filter'] = 'grayscale(100%)';
  document.body.style['-o-filter'] = 'grayscale(100%)';
  document.body.style['filter'] = 'grayscale(100%)';
}

nginx 添加方式

重新编译 nginx，增加 http_sub_module 模块。

可使用 nginx -V 查看 nginx 已有模块。

# nginx -V
nginx version: nginx/1.12.2
built by gcc 5.4.0 20160609 (Ubuntu 5.4.0-6ubuntu1~16.04.9) 
built with OpenSSL 1.0.2l  25 May 2017
TLS SNI support enabled
configure arguments: --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_gzip_static_module --with-ipv6 --with-http_sub_module --with-openssl=/usr/local/lnmp1.4-full/src/openssl-1.0.2l

查看 configure arguments 是否有 –with-http_sub_module ，如果已有，则不需要重新编译。

在 nginx.conf 配置文件增加以下代码：

http {
  # 在 http 模块开启 sub filter
  sub_filter_once on;
  server {
    # 在 server 模块，添加配置
    sub_filter  '</head>'  '<style type="text/css">body {
      filter: url("data:image/svg+xml;utf8,<svg%20xmlns=\'http://www.w3.org/2000/svg\'><filter%20id=\'grayscale\'><feColorMatrix%20type=\'matrix\'%20values=\'0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200\'/></filter></svg>#grayscale");
      -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);
      -ms-filter: gray;
      filter: gray;
    }</style></head>';
  }
}

其原理还是在 head 前面新增 css 样式。

兼容性

Can I use filter: grayscale 兼容性

由于使用了 CSS3 ，所以各位还是放弃IE吧！

IE8 IE9 都可以通过 filter: gray; 显示灰色，更低一点还有 filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);。

但是 IE10 IE11 就没法搞了，原因是 IE10+ 之后，为了向 W3C 看齐， IE 干掉了自己的滤镜，又没添加 W3C 的滤镜。

所以 IE10 IE11 无法支持！！！包括 edge 部分版本都不支持，如下图：

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议进行许可。可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-04-03/css3-filter-grayscale/

如果您觉得文章不错，可以点击文章中的广告支持一下！