说说filter这个css属性（网站置灰实现）

在2020年4月4日这一天，大家无论打开手机、电脑网页还是APP，都可以看到所有的内容都已经变成了灰色，大家可能还会误以为是网站统一换了一套css样式，不过后面转念一想这么多网站及页面，如果要统一换样式，工程还是很大的。好奇心驱使我打开浏览器查看元素，结果发现很多的网站几乎是通过一个css属性filter来设置这种置灰的效果

一、filter属性：

1、也叫做滤镜属性，用于将模糊和颜色偏移、饱和度、透明度等图形效果应用于元素上。
2、旧版的IE（4-8）不支持该属性
3、默认值为none，表示没有任何效果

二、取值：

1、none   -》默认值，表示没有任何效果

2、blur(px值)  -》给元素设置高斯模糊，值越大越模糊，默认是0，可以接受css的长度值，不支持百分比

3、hue-rotate（deg值） -》设置应用色相相转，色环的角度值没有限制，0deg为无变化，n*360deg表示转到原来的位置，还是无变化

4、drop-shadow(水平偏向值，垂直偏向值，模糊大小值，阴影缩放值，颜色) -》用于设置阴影，和box-

5、shadow相似，但通过filter可以，一些浏览器为了更好的性能会提供硬件加速

6、url() -》用来接收一个XML文件，该文件设置了滤镜，且可以包含一个锚点来指定一个具体的滤镜元素，如：filter: url(svg-url#element-id)

7、brightness（百分比值） -》设置元素更亮或者更暗，0%是全黑，100%是原图，大于100%会比原图更亮

8、contrast（百分比）  -》设置对比度，0%是全黑，100%是原图，大于1会使用更低的对比度

9、grayscale（百分比） -》转为灰度图像，0%表示原图，100%则全部转为灰度图像

10、opacity（百分比） -》设置透明度，0%表示完全透明，100%则无变化，它和opacity的属性很相似，不过通过filter来设置透明度可以提供硬件加速，进而提升来一些浏览器性能

11、saturate（百分比） -》设置饱和度，0表示完全不饱和，100%是正常，大于100%会增加饱和

12、sepia（百分比）转换为深褐色，0%是无变化，100%是完全转为深褐色

13、initial -》设置属性为默认值

14、inherit -》从父元素继承该属性

三、不支持filter的低版本IE怎么实现置灰效果呢

1、大部分浏览器可以通过设置filter:grayscale(.5)的方式或者设置filter为其他值的方式来实现网页的置灰效果，如：

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

2、IE7-9可以使用filter:gray来实现置灰，IE9以上就没有效果了

filter:gray;

3、对于低版本IE，可以引入grayscale.js文件进行置灰，这大概是一个通用的方法

1. 在页面引入js文件：

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

2. 然后在你的js文件中置灰你想置灰的元素，如果要全页面置灰可以作用在html元素上，如：

grayscale(document.getElementsByTagName("img"));  

grayscale(document.getElementsByTagName("html"));