王佳冬中文博客

08年的时候大家都喜欢把自己的网页搞成黑白色，以示“潮流”，如今这种情况再次出现了，暂且不管灾不灾的问题，先来看看有几种实现的方式吧。

css3灰度滤镜实现

css3有一个叫做greyscale 的滤镜，可以让网页瞬间变成黑白的，只要在css文件最顶端加入以下样式即可：

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;

优点：一键添加，打通所有浏览器

缺点：不支持css3的浏览器就无法看到了

IE灰度滤镜实现

在没有css3之前，往往都是用一种滤镜去瞬间让网页变成黑白，想必很多站长都见过这个css代码：

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

如果不高兴弄css文件的话，那就在网页头部加上一段简单的代码：

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

优点：使用网页标准协议，门槛比较低

缺点：仅在IE内核下生效，其他内核浏览器无效

逐个编辑css样式和图片

这个方法就不多作介绍了，大公司的做法，就是逐个css样式修改，每张图片和flash去修改，如果网站很大的话工程量是很大的，当然现在大家的做法是只改首页。

如果是像我这样的独立wordpress博客，其实完全可以做一个灰色的主题包，曾经在2009年就制作过一个海地地震祈福的灰色主题包（详见头图），虽然一次修改的工程量比较大，但是长久下去的话就非常方便，替换样式文件便是。

优点：可逐个模块自定义，也不存在浏览器兼容问题

缺点：费时费力