学习如何使用一行代码实现网页变灰效果。
一、效果
效果图
谷歌浏览器
二、css分析
通过filter滤镜实现网页变灰，为什么filter需要有这么多行？看下面分析：
filter滤镜
filter: grayscale(100%);
将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
提高兼容性使用浏览器私有属性设置filter
浏览私有属性
-ms //-ms代表ie内核识别码
-moz //-moz代表火狐内核识别码
-webkit //-webkit代表苹果的Safari浏览器及谷歌内核识别码
-o //-o代表欧朋【opera】内核识别码
IE中filter属性
filter:progid:DXImageTransform.Microsoft.BasicImage(Grayscale='x', Xray='x', Mirror='x', Invert='x', Opcity='x', Rotation='x')
GrayScale ，设置或调整对象的灰度值。
XRay ，设置或调整对象的X射线，布尔值，0正常显示，1代表X射线，有点像我们去医院拍X光一样的效果。
Mirror ，设置或调整对象镜像。0正常显示，1内容对象将翻过来。
Invert ，设置或调整对象的反相。
Opacity ，设置或调整对象的不透明度。
Rotation ，设置或调整对象旋转，0正常显示，1代表旋转90°，2代表旋转180°，3代表旋转270°
三、总结
更多属性参考：https://www.runoob.com/cssref/css3-pr-filter.html
