2020年4月4日

css让整个网站快速变灰白


4月4日凌晨零点起,腾讯游戏官方发布将把腾讯旗下所有娱乐游戏停服一天,以警示玩家深记抗疫战士的伟大付出和抗疫历史。

为了哀悼英雄们,不仅游戏被官方停服,新闻资讯的所有界面都被黑白色取代,我们为死难者哀悼时候,都会把网站调到灰色,如何快速实现呢,以下介绍两种方法(切图网用的第一种)

方法一 :

html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}

方法二:

在引人的页面导入grayscale.js文件,例如

<script type="text/javascript" src="js/grayscale.js"></script>

然后

<script type="text/javascript">
window.onload = function(){
grayscale(document.html);
}
</script>

grayscale.js下载地址

https://gitee.com/qietuwang/codes/u08qiecfk3s5ngjxwzr9p12

本人在IETester工具下,测试IE7/8/9均支持,IE6不支持,XP系统真实IE6环境下没测试过!

采用webkit的Chrome支持(需要Chrome 18.0.976版本以上),其他采用webkit引擎的浏览器没测试过,只要采用最新webkit nightly版本均支持

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732