网站变灰是怎么实现的

不久前因国家领导人逝世，为表达对他的敬意，所有互联网平台统统将网页改成灰色。

如何将网页全部变成灰色，包括按钮和图片。如何做到这种变灰的效果呢？

方案一：换一套灰色的UI，这种方案成本太高，耗时太长。

方案二：使用css控制整个网页的颜色

html {

filter:grayscale(100%);

-o-filter:grayscale(100%);

-ms-filter:grayscale(100%);

-moz-filter:grayscale(100%);

-webkit-filter:grayscale(100%);

}

有兴趣的可以在浏览器试一下效果。这段代码的主要作用就是：将图像转成灰色，参数是一个百分比。

百分比越高颜色越灰，反之百分比越小图像颜色越接近原色。

filter是css的一个属性，除了可以使用grayscale函数，可选函数还有一下这几种

html{

//模糊图像

filter:blur();

//使图像更亮或者更暗

filter:brightness();

//增加或减少图像的对比度

filter:contrast();

//在图像后面应用阴影

filter:drop-shadow();

//更改图像的整体色调

filter:hue-rotate();

//反转图像的颜色

filter:invert();

//使图像透明

filter:opacity();

//对输入图像进行超饱和或去饱和处理

filter:saturate();

//将图像转换为棕褐色

filter:sepia();

}