清明哀悼网站变灰技术-CSDN博客

昨天是4月4日清明节，全国都在为抗击疫情（新冠肺炎）做斗争牺牲的烈士和逝世的同胞哀悼，各大网站都会让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念。当然，今天已经恢复了，需要测试可以在自己网站测试。

对此，我学习了一下如何将网站变灰色，我也对如何恢复彩色做了一点学习。

一、让网站变成灰色的办法

方法一：

打开CSS文件在最前面加上以下代码就可以了，这段代码使用的是CSS滤镜，将网页中的色彩部分过滤掉。

html {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
或 * {
    filter: gray;
    color: gray;
}

部分网站如果按照上面修改后没有效果，那把代码顶部的<html>改成：

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

方法二：

编写一个js文件，网页中引入该文件

grayscale(document.body); //整站变成灰色 
grayscale(document.getElementById("main"));//指定元素变灰色
grayscale.reset(document.getElementById("main"));//指定元素还原

方法三：

FLASH动画的颜色不能被CSS滤镜控制，但可以在FLASH代码的<object>和</object>之间插入如下

<param value="false" name="menu"/> <param value="opaque" name="wmode"/>

二、解除网站变灰色的办法

方法1.使用样式编辑【Stylus】

安装一个插件：https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne/related

csdn下载地址：Stylus1.5.9

html {
    filter: grayscale(0) !important;
}

html,
body {

    -webkit-filter: grayscale(0%);

    -moz-filter: grayscale(0%);

    -ms-filter: grayscale(0%);

    -o-filter: grayscale(0%);

    filter: grayscale(0%);

   
}
 * {
        filter: none !important
    }

方法2.使用脚本【tempermonkey或者暴力猴】

下载地址：https://chrome.google.com/webstore/detail/tampermonkey-beta/gcalenpjmijncebpfijmoaglllgpjagf

csdn下载：Tampermonkey BETA4.10.6

使用方法：

点击图标，选择添加新脚本

粘贴下列代码，保存即可：

(function() {
    GM_addStyle("* {filter: none !important}");
   
})();

友情链接：

怎么让灰色的网页恢复成彩色,灰色网页变回彩色脚本代码

网站变灰色代码方法大集合（站点哀悼代码之用）

网站哀悼（全站变灰色）代码