将一个网站整个置灰

每遇自然灾害时，很多网站都整个变灰了，事情过了之后网站又恢复原样，这种做法很人性化。这是怎么实现的呢，不可能一个个元素去修改吧？实际上这种方式很简单，但不常用，所以记录下来，需要的时候查一下：

CSS实现

.gray {     -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);    filter: grayscale(100%);    filter: gray;/*IE*/}

上面是CSS的实现代码，使用的是过滤器。

JS的实现方式

grayscale(document.body);

SVG滤镜实现

新建一个gray.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">    <filter id="grayscale">        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>    </filter></svg>

如下CSS调用代码：

filter: url(gray.svg#grayscale);

Grayscale.js

有一个插件grayscale可以兼容各个浏览器

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>...grayscale(document.getElementsByTagName("img"));

扩展知识

CSS filter
css filter有很多取值，虽然各浏览器的兼容性不一致，但是了解下未必是坏事。
grayscale灰度

 -webkit-filter:grayscale(1);

sepia复古颜色

-webkit-filter:sepia(1);

saturate饱和度

-webkit-filter:saturate(0.5);/*降低饱合度*/-webkit-filter:saturate(3);/*提高饱合度*/

hue-rotate色相旋转

-webkit-filter:hue-rotate(90deg);

invert反色

-webkit-filter:invert(1);/*有点像相片的底片*/

opacity透明度

-webkit-filter:opacity(.2);

brightness亮度

-webkit-filter:brightness(.5);

contrast对比度

 -webkit-filter:contrast(2);

blur模糊

 -webkit-filter:blur(3px);

drop-shadow阴影

 -webkit-filter:drop-shadow(5px 5px 5px #ccc);

组合：

-webkit-filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);

浏览器兼容性

SVG滤镜：

feBlend - 与图像相结合的滤镜feColorMatrix - 用于彩色滤光片转换feComponentTransferfeCompositefeConvolveMatrixfeDiffuseLightingfeDisplacementMapfeFloodfeGaussianBlurfeImagefeMergefeMorphologyfeOffset - 过滤阴影feSpecularLightingfeTilefeTurbulencefeDistantLight - 用于照明过滤fePointLight - 用于照明过滤feSpotLight - 用于照明过滤