⽹站整体变灰（⿊⽩、置灰）原理

⽹站整体变灰（⿊⽩、置灰）原理

在很多时候我们需要把整个⽹站变灰，⽐如“汶川地震”。现在来看看⽹站是如何实现整体变灰的

1、用CSS3 filter(滤镜) 属性

html{

-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */

filter: grayscale(100%);

}

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

有一点需要注意，filter这个属性会改变position这个地位，如果在操作置灰的标签内使用了定位，定位位置可能会错乱。
解决方法：一、可以改变置灰的标签元素；二、可以改变定位属性的父级元素。

浏览器⽀持：

grayscale()：

将图像转换为灰度图像。值定义转换的⽐例。值为100%则完全转为灰度图像，值为0%图像⽆变化。值在0%到100%之间，则是效果的线性乘⼦。若未设置，值默认是0。

上⾯所说的css3属性IE浏览器并不⽀持，其实这样做已经覆盖了⼤部分浏览器

filter: gray;

这个属性直接加载html上是不管⽤的，如果需要图⽚变灰可以只将样式作⽤于img标签，或者⽤*通配符作⽤于所有元素，这样整个⽹站就会变灰。

经测试，在IE7-9都是没问题的，IE9以上不能⽣效。

2、

<style>
html{
filter: grayscale(100%); -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%); -ms-filter: grayscale(100%);
-o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}
</style>