前天，为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院发布公告决定2020年4月4日举行全国性哀悼活动。
很多网站和平台都关停了服务器：
没停的也做了黑白显示：
当然我的网站也不例外：
但细心或者使用IE、360或者苹果浏览器的小伙伴会发现一些大厂的网站竟然还是彩色的：
那到底都搞了些什么动作才能让整个网站黑白显示呢？网上也有不少资料，基本都是通过在头部加css样式：
方法一：这种方法会影响页面其他样式，而且在IE、360都不行
<style>
body *{
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter:gray; /*ie9- */
}
</style>方法二：在IE、360都不行
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">方法三：这种只有在IE不行
<style type="text/css">
html {overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
</style>方法四：使用这个插件http://james.padolsey.com/demos/grayscale/grayscale.js
<script src="https://j11y.io/demos/grayscale/grayscale.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){
grayscale(document.body);
}
</script>还有其他诸如：但以下两种都不行！
只支持IE方法一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style>只支持IE方法二：
body {filter:gray}我用上面第三种，简单兼容性又好，当然如果你有更好的办法连同IE都支持的欢迎给我留言，等这次疫情彻底结束，全球做哀悼还可以用上呢！
小程序和APP只需要在page或者根节点加上“filter: grayscale(100%);position: absolute;”即可。
另外，给大家提个醒，公众号黑白只是将封面图片处理成灰色而已，并不能把内容都黑白的，除非你里面的所有图片都先处理成黑白再上传。
展开阅读全文
扫码打开小程序可评论文章保存图片，在“我的”有实时在线客服哦，
关注我的公众号为您分享各类有用信息
分享录多端跨平台系统
粤公网安备 44011202001306号