今天我们就从前端的角度来了解一下网页变灰是如何实现的，以及相关的使用技巧。实现思路首先我们来看看一些主流网站是如何实现变灰的：哔哩哔哩：淘宝：京东：掘金：可以看到，这些网站实现变灰的方式各不相同，但大同小异。本质上，它们都使用了CSS中的filter属性。以下是MDN对filter属性的解释：CSS属性filter将模糊或颜色偏移等图形效果应用于元素。过滤器通常用于调整图像、背景和边框的渲染。简单的说，filter属性就是用来给元素添加不同的过滤器。该属性支持传入多种Filter函数，其中grayscale()函数是变灰的关键。grayscale()函数会改变输入图像的灰度，该函数有一个参数表示转换为灰度的比例。当值为100%时，图像完全转为灰度；当该值为0%时，图像不变。介于0%和100%之间的值是效果的线性乘数。如果不设置值，默认为0。因此，只需要在页面的html元素上设置如下样式即可实现页面变灰：html{filter:grayscale(100%);}那为什么很多网站灰掉不止这行属性？可以看到京东的灰度代码如下：html.o2_gray{-webkit-filter:grayscale(100%);-moz-filter:灰度(100%);-ms-filter:灰度(100%);-o-滤镜：灰度（100%）；滤镜：灰度（100%）；-webkit-过滤器：灰色；过滤器：灰色；-webkit-filter:progid:dximagetransform.microsoft.basicimage(灰度=1);filter:progid:dximagetransform.microsoft.basicimage(grayscale=1);}其实这几个属性最终的效果是一样的，都是为了兼容filter属性。filter属性是CSS3添加的属性。在不同的浏览器和低版本的浏览器上，filter属性的兼容性是不一样的：对于上面的代码，其中：-webkit-filter:前缀为webkit可以在webkit内核中浏览-moz-filter:前缀为moz在火狐浏览器中可以生效；-ms-filter:以ms为前缀在IE浏览器中生效；-o-filter：前缀为o的可以在Opera浏览器中生效；最后三行适用于与IE内核兼容的浏览器。那么如何实现动态添加呢？你只需要将这些过滤器属性写在一个类中，需要的时候将这个类型动态添加到html标签中即可。.gray{-webkit-filter:灰度(100%);-moz-filter:灰度(100%);-ms-filter:灰度(100%);-o-滤镜：灰度（100%）；过滤器：灰度（100%）；-webkit-过滤器：灰色；过滤器：灰色；-webkit-filter:progid:dximagetransform.microsoft.basicimage(灰度=1);filter:progid:dximagetransform.microsoft.basicimage(grayscale=1);}相关展开接下来我们看看filter属性还有哪些实用的属性值！过滤器：模糊（）|亮度（）|对比（）|阴影（）|灰度（）|色调旋转（）|反转（）|不透明度（）|棕褐色（）|饱和（）|网址（）；(1)blur():blurblur()函数用于设置元素模糊效果，对元素应用高斯模糊视觉效果。此函数采用CSS长度值来确定屏幕上有多少像素需要相互融合以产生模糊结果。传递的CSS长度值越大，应用于元素的模糊程度就越高。如果未提供值，则使用默认值0。.image{-webkit-filter:blur(0|2px|5px);filter:blur(0|2px|5px);}下面是使用三个值时对应的效果：这个属性可以用来实现常见的磨砂玻璃效果。(2)Brightness()：亮度brightness()函数可用于调整图像的亮度级别，使其显得更亮或更暗。值为0%会产生全黑图像。值为100%或1将使图像保持其原始亮度级别。大于或小于100%或1的值决定图像的暗度或亮度。.image{-webkit-filter:亮度(50%|100%|200%);filter:brightness(50%|100%|200%);}下面是使用三个值时对应的效果：(3)contrast():Contrastcontrast()函数用来调整图像的对比度，即即，调整图像最暗和最亮部分之间的亮度差异。它接受百分比或小数值来确定图像的对比度级别-值为0会导致完全灰色的图像。高于100%和1的值会增加对比度，而低于100%的参数会降低图像的对比度。.image{-webkit-filter:对比度(50%|100%|200%);filter:contrast(50%|100%|200%);}以下是使用三个值时对应的效果：(4)opacity():Opacityopacity()函数对图像施加透明效果。它接受百分比或小数值来确定应用于图像的透明度。0%或0的不透明度将导致完全透明的元素。100%不透明度将显得不透明。将不透明度设置在0%到100%之间将使元素或图像部分透明。.image{-webkit-filter:不透明度(10%|40%|80%);filter:opacity(10%|40%|80%);}下面是使用三个值时对应的效果：opacityfilters和CSS中的opacity属性有什么区别？它们都用于控制元素的透明度。但是filter属性启用了硬件加速。浏览器将计算任务卸载到图形处理单元(GPU)——一种专门用于加速系统内图形渲染的处理器。这会提高浏览器的效率并释放CPU用于其他任务。(5)sepia():sepiasepia()函数可以为图像添加柔和的棕色调，使图像看起来更温暖、更复古。它类似于使用灰度滤镜，但带有棕褐色调。它接受0到1之间的小数值，或最大100%的百分比值。值为0会使图像保持不变。100%或1的值将使图像完全变成棕褐色，而0%和100%之间的值将使图像的色调介于其原始颜色和完全棕褐色之间。.image{-webkit-filter:深褐色(10%|40%|80%);filter:sepia(10%|40%|80%);}下面是使用三个值时的对应效果：(6)drop-shadow():Shadowdrop-shadow()函数用于增加阴影的阴影图像，类似于box-shadow，使图像看起来更立体。drop-shadow()函数接受四个参数：
