开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

前端变灰效果这种在实际项目的过程中使用的比较少，一般在清明节、全国哀悼日、大地震的日子、以及一些影响力很大的伟人逝世或纪念日的时候使用，使用后的网站的网页变成灰色(黑白色)，以表示对逝者的悼念。

今天从前端的角度出发，看看变灰的原理及实现过程。

实现思路及原理

先一起看一下主流网站是如何实现的：

掘金 淘宝 csdn 我们从上面的图中可以发现，这些主流网站实现的方式都一样，大同小异，但追其本质都是使用的 css 中的 filter 属性中的grayscale值。

filter属性有啥用是干啥的？我们可以先看一下MDN中的解释：

CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染

大白话就是 filter 属性就是用来给元素添加不同的滤镜。该属性中支持传入多种 Filter 函数。其中 grayscale() 函数就是用于置灰的关键。grayscale() 函数将改变输入图像灰度，该函数有一个参数，表示转换为灰度的比例。当值为 100% 时，完全转为灰度图像；当值为 0% 时图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0。

因此，只需将页面的 html 元素设置以下样式即可实现页面置灰：

html  {
     filter: grayscale(100%);
}

但我们刚刚看到淘宝那个有很多行，这是为什么呢？ 解答：因为filter是css3新增的一个属性，并不是所有的浏览器和版本都支持，所以为了让更多的浏览器实现这个效果，就出现了我们看到的很多行。 但实际上的效果都是一样的。

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

适配内核说明

*图片源于网络

• -webkit-：带有 webkit 前缀可以在 webkit 内核的浏览器中生效；
• -moz-：带有 moz 前缀可以在 Firefox 浏览器中生效；
• -ms-：带有 ms 前缀可以在 IE 浏览器生效；
• -o-：带有 o 前缀可以在 Opera 浏览器生效； 最后三行都是为了兼容 IE 内核的浏览器。

属性拓展

blur()

用于设置元素模糊效果，将高斯模糊视觉效果应用于元素。接受一个 CSS 长度值来确定屏幕上有多少像素需要相互融合以生成模糊结果。传递的 CSS 长度值越大，应用到元素的模糊度就越高。默认值 0。

该属性常用于实现图片的毛玻璃效果。

	.image{
		width: 200px;
        height: 200px;
        filter: blur(1px); 
    }

brightness()

用于调整图像的亮度级别，使其看起来更亮或更暗。当值为 0% 时，会产生全黑图像。值为 100% 或 1 会使图像保持其原始亮度级别。大于或小于 100% 或 1 的值决定图像的暗度或亮度。

	.image{
		width: 200px;
        height: 200px;
        filter: brightness(120%); 
    }

contrast()

用于调整图像的对比度，也就是调整图像最暗和最亮部分之间的亮度差异 。

	.image{
		width: 200px;
        height: 200px;
        filter: contrast(190%); 
    }

opacity()

将透明效果应用于图像。

	.image{
		width: 200px;
        height: 200px;
        filter: opacity(40%); 
    }

filter 的 opacity 和 opacity 这两个属性的区别在于 filter会开启GPU硬件加速渲染，而opacity则不会。

sepia()

可以为图像添加柔和的褐色色调，使图像看起来更温暖、更复古。它类似于使用灰度滤镜，但色调为褐色。

	.image{
		width: 200px;
        height: 200px;
        filter: sepia(40%); 
    }

drop-shadow()

用于增加图像的阴影，和box-shadow类似，使图像看起来更加立体。 接受四个参数：

• <offset-x>：长度值，指定元素和投影之间的水平距离。正值将阴影置于元素右侧，负值将阴影置于左侧。
• <offset-y>：长度值，指定元素和投影之间的垂直距离。正值将阴影置于元素下方，负值将阴影置于其上方。
• <blur-radius>: 阴影的模糊半径指定为 CSS 长度单位。值越大，阴影变得越模糊。如果未指定，则默认为 0，产生清晰且不模糊的阴影。不允许使用负值。
• <color>：阴影的颜色。如果未指定，则默认为黑色。

	.image{
		width: 200px;
        height: 200px;
        filter: drop-shadow(10px 10px 10px #ff0000); 
    }

saturate()

用于改变元素中颜色的饱和度。饱和元素的颜色比较鲜艳；对于曝光不足的图像可以增加饱和度，反之亦然。0% 表示完全不饱和，100% 表示与原图像一样。

	.image{
		width: 200px;
        height: 200px;
        filter: saturate(40%); 
    }

initial

filter 的默认值，会被解析为none

	.image{
		width: 200px;
        height: 200px;
        filter: initial; 
    }

inherit

继承父级计算的 filter 属性的值。

	/* 父盒子 */
	.father-image{
        filter: saturate(40%);
    }
    /* 图片 */
	.image{
		width: 200px;
        height: 200px;
        filter: inherit; 
    }

温馨提示

filter 的属性是可以写多个的，根据顺序渲染。多个属性中不可以使用initial、inherit，不然会没效果的。

	.image{
		width: 200px;
        height: 200px;
        filter: blur(1px) saturate(40%); 
    }