网站变灰是怎么实现的

简介：主要结束如何通过css将网站背景变成灰色，字体变成白色

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

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

方案一：换一套灰色的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();
}

 

有遗漏或者不对的可以在我的公众号留言哦