2008年5月12日(星期一)14时28分04秒，一场突如其来的大地震撼动了整个中国，一时间震中城市汶川成为了重灾区。
5·12汶川地震是中华人民共和国成立以来破坏力最大的地震，也是唐山大地震后伤亡最严重的一次地震。经国务院批准，自2009年起，每年5月12日为全国“防灾减灾日”。
2008年5月12日(星期一)14时28分04秒，一场突如其来的大地震撼动了整个中国，一时间震中城市汶川成为了重灾区。
5·12汶川地震是中华人民共和国成立以来破坏力最大的地震，也是唐山大地震后伤亡最严重的一次地震。经国务院批准，自2009年起，每年5月12日为全国“防灾减灾日”。
为什么要以5·12汶川地震做为这篇文章的开头呢？原因在于汶川地震过后不久，各大门户网站、娱乐网站等众多网站不约而同的变成了灰色系(黑白色)，以此哀悼汶川地震中遇难的同胞。
说到这里，相信已经有人猜到笔者要说什么内容了。
作为门户网站或娱乐网站而言，支撑其网站的数据量是非常庞大冗杂的，而且这类网站用到的数据多数都是实时更新的。如果要将用到的图片一张张处理成灰度图，不仅需要耗费大量的人力、物力，而且一旦有疏漏就无法实现全站黑白效果。
所以，用代码实现是最佳的方式。用到的时候直接引用即可实现效果，不用的时候去掉就行。这样既保证了想要的效果又不会对实时数据产生太大影响，最重要的是节约了各种成本。
说了这么多，如何让网站变成灰色呢？
下面笔者给出代码：
- html {
- -webkit-filter: grayscale(1);
- -moz-filter: grayscale(1);
- -ms-filter: grayscale(1);
- -o-filter: grayscale(1);
- filter: grayscale(1);
- filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1); /* IE6 ~ 9 */
- }
原理就是借助CSS或CSS3提供的滤镜实现，这样做的好处是不但能够实现图片变灰，而且还能实现设置的背景图也变灰(html和body设置的背景图除外)。
特别提醒：
1、如果网页中加了上述代码没有看到效果，请先检查一下网页是否使用了早期的网页协议而非最新的网页标准协议——<!DOCTYPE html>。
2、对于IE10和IE11，微软放弃了对自己特有滤镜的支持且没有支持标准浏览器的灰度属性，所以要想兼容这两个浏览器需要借用一些其它手段，如：JS，具体代码请自行网上搜索。
3、该样式一旦生效，页面中的定位元素将会失效，具体原因笔者尚不清楚。如果你知晓其中缘由，欢迎留言解惑。
有了这段代码，每年也能在相应的时间让自己的网站变得有“意义”起来。
