为雅安祈福网页改为黑白灰

08年汶川大地震之后，学校领导根据国务院文件，5.19-5.21为全国哀悼日，在此期间要求把学校官方网站改为黑白灰，表示为全国哀悼日。开始不懂得CSS工作方法，和周敏逃课改网页文件，结果弄了半天还是没有改了。后来一计科的学长给了段CSS代码一下子就事半功倍，改好了。

才事隔几年灾难再次来到四川，真心为雅安地震中受灾的同胞们祈福，愿他/她们平安幸运度过难关。

网页黑白灰修改CSS代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装

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

当时学校的电脑主要是使用XP+IE浏览器，没有人装非IE内核的浏览器，改了这段代码看看有效果就完事了。今天再使用这一条代码才发现，原来只是对IE内核的浏览器有用，使用惯了的谷歌浏览器死活出不为效果。网上查查资料，发现需要更高级的代码才能让所有的浏览器起效果，CSS代码如下：

1
2
3
4
5
6
7
8
9
10

html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:url(desaturate.svg#grayscale);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);}

在这个样式代码中，涉及到了一个文件，就是desaturate.svg，从文件扩展名中可以看到，利用到了SVG技术了，代码如下：

1
2
3
4
5
6
7
8

使用这段CSS代码的同量需要将这SVG代码保存为desaturate.svg，再通过url链接才可以起作用。