背景

通常我们会发现，手机打开的某个应用变为全灰色，纪念或者悼念某个特殊的日子， 想想也知道不可能去单个元素都去加一个样式，肯定有什么万剑归宗大法，可以一键设置什么的，毕竟后面还要恢复原样

了解下filter（滤镜）

CSS3 filter(滤镜) 属性 | 菜鸟教程
filter:

  • none
  • blur() | 给图像设置高斯模糊
  • brightness() | 给图片应用一种线性乘法，使其看起来更亮或更暗。
  • contrast() | 调整图像的对比度。
  • drop-shadow() | 给图像设置一个阴影效果。
  • grayscale() | 将图像转换为灰度图像，我们使用这个属性实现全灰
  • hue-rotate() | 给图像应用色相旋转。
  • invert() | 反转输入图像。
  • opacity() | 转化图像的透明程度。
  • saturate() | 转换图像饱和度
  • sepia() | 将图像转换为深褐色
  • url(); URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素

使用空格分割多个滤镜

实现

通过在html上设置 filter 实现全局加灰色滤镜
image.png
贴代码：

  1. html {
  2.     -webkit-filter: grayscale(100%);
  3.     -moz-filter: grayscale(100%);
  4.     -ms-filter: grayscale(100%);
  5.     -o-filter: grayscale(100%);
  6.     filter: grayscale(100%);
  7.     filter: gray;
  8. }
  10. /* html {
  11.         filter: grayscale(100%);
  12.         -webkit-filter: grayscale(100%);
  13.         -moz-filter: grayscale(100%);
  14.         -ms-filter: grayscale(100%);
  15.         -o-filter: grayscale(100%);
  16.         filter: url("data:image/svg+xml;
  17.         utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  18.         filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  19.         -webkit-filter: grayscale(1);
  20.     } */

效果：
image.png