网站全局变灰操作方式及实现CSS代码


## 前言 为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院决定,2020年4月4日举行全国性哀悼活动。

为响应国务院办公厅关于为新冠肺炎疫情牺牲烈士和逝世同胞举行全国性哀悼活动的通知,同时按照客户的要求将部分客户网站于4月4

日0时至24时变黑白。同时我们伟致官网也同步变灰,以悼念抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞,简单描述下如何将网站变灰。

正文

CSS方法

在网站需要变灰的页面head部分加入一行style

<style type="text/css">html {-webkit-filter: grayscale(100%);}</style>

以上代码适用于主流浏览器,如新版的chrom,edge等

<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>

以上代码兼容绝大多数浏览器,包括QQ浏览器,360极速浏览器,IE浏览器等

Author

Linus Xiong

Posted on

2020-04-04

Updated on

2020-04-04

Licensed under

Comments