网站变灰解决方案

清明时节雨纷纷,路上行人欲断魂!

今天是个特殊的日子,为了表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院决定,2020年4月4日举行全国性哀悼活动,10时起,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。

从昨天接到通知,要把网站变成灰色,经过多方查找,找到网上流传的解决方案:

html {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

但是,发现IE10以上,把filter这个属性干掉了……所以高版本的IE跪了!!

不过方案还是有的,那就是强制让IE降级到IE9!

<meta http-equiv="X-UA-Compatible" content="IE=9" />

这样就可以保障所有的网站都变成灰色的了。

另外还有grayscale.js这种方案,但是看了下实现原理,是把所有img标签的文字都转成base64,然后灰度处理,这样性能会比较卡顿,所以不推荐用这种方式来做,而且这种方案是不支持样式背景图的……

添加新评论