一条CSS实现全站变灰 — 再也不用替换图片了

在文明的发展过程中，偶尔会出现一两次灾难，互联网为了缅怀灾难带来的痛苦，形成了一种特殊的缅怀方式——全站变灰。通过这种卸下色彩的方式来纪念过去。虽然我们需要这么做，但同时会给运维人员带来很大困扰，他们需要把整个站点弄成灰色，听起来就不容易。而今天，给他们的福利来了。一条CSS实现全站变灰。

我们先来看看这条CSS

html{
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter:none
}

操作步骤

只需要把上面的CSS代码添加到网站的公共CSS文件里，放在全局html定义之后。这样才能覆盖全局html的样式。

实现效果

实现原理  

我们看到这条CSS里主要的属性就是 filter 那么这个属性是什么意思呢？

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

它可以设置的值有  none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); 

这里我们用到的就是grayscale灰度。

倒数第二行的  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  对，你猜的没错，就是为了照顾古老的IE浏览器。

不过最新的微软 Edge 浏览器也放弃挣扎使用Chromium内核了，以后不用针对IE再多说废话了。