页面置灰（PC后台、微信小程序）

由于接入的有政府的项目，在这段时间需要把公司官网，小程序首页置灰；接到需求真的是一脸懵，不过百度之后恍然大悟，感叹 CSS3 是个好东西，也让我学会一个新属性 filter 滤镜；

1、filter属性使用

filter 属性定义了元素的可视效果，例如：模糊、饱和度等；

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

2、filter函数

滤镜通常使用百分比，也可以使用小数来表示；

1. none：默认值，无效果；
2. blur(px)：给图像设置高斯模糊；
3. brightness(%)：给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化；
4. contrast(%) ：调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变；
5. grayscale(%)：将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
6. opacity(%) ：转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化；
7. saturate(%)： 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化；
8. sepia(%) ：将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化；

我们用到的置灰 grayscale(%)，如果想要整个官网都是灰色的，只需要在 HTML 或者 body 上设置样式：

filter: grayscale(100%);

3、IE浏览器

IE9 以上设置这个属性是没有效果的，当然现在很多公司都不在兼容 IE 浏览器，如果非要在 IE 浏览器下也使用这个属性的话可以在全局页面引入：http://james.padolsey.com/demos/grayscale/grayscale.js，然后再页面使用：

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

4、定位问题

使用滤镜 filter: grayscale(100%) 时，会是页面使用的 position:fixed 元素发生冲突， position:fixed 的参考点为窗口，加上这个属性之后会使参考的变为 body。这样定位就会出问题；

解决办法就是：不要将定位的元素包裹在设置滤镜属性的元素中；如果定位的元素也需要滤镜，可以在定位的元素上单独加；