css滤镜实现网页变灰效果

学习如何使用一行代码实现网页变灰效果。

一、效果

效果图

谷歌浏览器

二、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