【笔记】CSS3滤镜效果，可实现整个网页变灰

使用filter属性可添加滤镜效果，【注意】IE没有filter属性
注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

以下实例演示了所有滤镜的使用方法:

.blur {-webkit-filter: blur(4px);filter: blur(4px);}.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}.invert {-webkit-filter: invert(100%);filter: invert(100%);}.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}.saturate {-webkit-filter: saturate(7);filter: saturate(7);}.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}

一行代码添加滤镜，整个网页变灰

html {-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);}