特殊时间，将页面整体调整成灰色

 效果展示

 

一、方法：将下面css样式加入页面中

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

二、原理：

FILTER: progid:DXImageTransform.Microsoft.Gradient使用  
语法：  
filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth,GradientType=0 | 1)

属性：
enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 可选值为true或false
true: 表示滤镜激活。 false表示滤镜被禁止

第二个参数和第三个参数都是可选的，且取值范围都是#FF000000 - #FFFFFFFF

第二个参数：startColorStr 字符串。设置或检索色彩渐变的开始颜色和透明度。
第三个参数：endColorStr 字符串。 设置或检索色彩渐变的结束颜色和透明度。
第四个参数：GradientType默认值是1，表示水平渐变。0表示垂直渐变。
说明：
在对象的背景和内容之间显示定制的色彩层。当此效果通过转变显示时，在渐变册色彩层之上的文本程序性的初始化为透明的，当色彩渐变实现后，文本颜色会以其定义的值更新。
示例：
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4ba6db', endColorstr='#369bd7', GradientType=0);

用css实现网页背景渐变的代码如下：

（1）、从上往下渐变 Example Source Code:
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}

（2）、从左上至右下渐变

body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
}

三、其他：将图片调整为灰色

		img{
			filter: grayscale(100%); 
		}