网站页面变灰，是如何实现的?

前言

前段时间打开网站看到好多网站页面都变灰了，一直没有时间研究，今天来学习下

---

先来感受下变灰后的效果吧（二话不说，直接上图）

 这种灰色的效果是如何实现的呢

 关键在于这个CSS

-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);

1.概述

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)，这是3C中给出的解释，简单说就是让我们能用 CSS 代码为元素指定各种滤镜效果，比如模糊、灰度、明暗度、颜色偏移等...

2.浏览器支持

3.使用  

Filter	效果名称	描述
none	无	默认表示没有效果
blur(px)	模糊	为图像设置高斯模糊，默认值为 0，单位为像素，值越大越模糊
brightness(%)	亮度调整	如果值是0%，图像会全黑。值是100%，则图像无变化。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%)	调整对比度	调整图像的对比度。值是0%的话，图像会全黑。值是100%，为原始图像。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color)	阴影	该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速 h-shadow：必填值，指定水平方向阴影的像素值，若值为负，则阴影会出现在图像的左侧； v-shadow：必填值，指定垂直方向阴影的像素值，若值为负，则阴影会出现在图像的上方； blur：可选值，为阴影添加模糊效果，默认值为 0，单位为像素，值越大创建的模糊就越多（阴影会变得更大更亮），不允许使用负值； spread：可选值，默认值为 0，单位为像素。若值为正，则阴影将会扩展并增大；若值为负，则阴影会缩小； color：可选值，为阴影添加颜色，如未指定，则由浏览器来绝对，通常为黑色 注意：Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。
grayscale(%)	图像转换（灰色）	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，若未设置，值默认是0；
hue-rotate(deg)	图像色相旋转	值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈
invert(%)	图像反转	值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，若值未设置，值默认是0
opacity(%)	透明度	转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%)	饱和度	转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。
sepia(%)	图像转换（深褐色）	将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，若未设置，值默认是0；