网站全局变灰操作方式及实现CSS代码
04-03,2020
为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院决定，2020年4月4日举行全国性哀悼活动。
为响应国务院办公厅关于为新冠肺炎疫情牺牲烈士和逝世同胞举行全国性哀悼活动的通知，同时按照客户的要求将部分客户网站于4月4日0时至24时变黑白。同时我们伟致官网也同步变灰，以悼念抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞，简单描述下如何将网站变灰。
CSS方法
在网站需要变灰的页面head部分加入一行style
<head>
<style type="text/css">html {-webkit-filter: grayscale(100%);}</style>
</head>
以上代码适用于主流浏览器，如新版的chrom，edge等
<head>
<style> html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); _filter:none; }
</style>
</head>
以上代码兼容绝大多数浏览器，包括QQ浏览器，360极速浏览器，IE浏览器等
以上代码也可以全局写入css文件中，我们伟致的网站系统一般采用style.css/theme.css/app.css三种命名方式。如果写入全局，那么整个网站变灰。
另外有部分网站还采用flash，那么以上代码就无法生效，需要修改flash部分的代码。
<param value="false" name="menu"/> <param value="opaque" name="wmode"/>
本文标签： 网站变灰 css 全国性哀悼活动
