一行代码实现网站首页变灰
因为众所周知的原因，这几天，所有的网站都变灰了。作为一名前端开发，我们自然是想探究一下如何实现的。
首先打开荣耀官网，按Ctrl+Shift+i，看到html下设置的样式
如下一行代码就实现了首页变灰：
然后打开没有变灰的vant-weapp某个页面
将代码复制到html标签下，神奇的事情就发生了
关于 filter 一起来看看吧：
定义filter将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。语法
相关描述
url() 获取指向 SVG 滤镜的 URI，该 SVG filter 可以嵌入到外部 XML 文件中
blur()函数将高斯模糊应用于输入图像。radius定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，因此，较大的值将产生更多的模糊。若没有设置值，默认为0。该参数可以指定为 CSS 长度，但不接受百分比值。brightness()函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。值为0%将创建全黑图像。值为100%会使输入保持不变。其他值是效果的线性乘数。如果值大于100%提供更明亮的结果。若没有设置值，默认为1。contrast()函数可调整输入图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1drop-shadow()函数对输入图像应用阴影效果。阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版本，最终合成在图像下面。函数接受<shadow>（在 CSS3 背景中定义）类型的值，除了inset和spread关键字。该函数与已有的box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。grayscale()函数将改变输入图像灰度。amount的值定义了转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘数。若未设置值，默认是0。hue-rotate()(en-US) 函数在输入图像上应用色相旋转。angle一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置值，默认为0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。invert()(en-US) 函数反转输入图像。amount的值定义转换的比例。值为100%则图像完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘数。若未设置值，则默认为0。opacity()转化图像的透明程度。amount的值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘数。也相当于图像样本乘以数量。若未设置值，则默认为1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。saturate()(en-US) 函数转换图像饱和度。amount的值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值是效果的线性乘数。超过100%则有更高的饱和度。若未设置值，则默认为1。sepia()(en-US) 函数将图像转换为深褐色。amount的值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，值是效果的线性乘数。若未设置值，则默认为0。复合函数：你可以组合任意数量的函数来控制渲染
更多关注公众号：前端知识分享喵
