来源：炫酷的css滤镜，你用过吗【渡一教育】

有一种常见的需求：在一些重要的纪念日将整个页面变成黑白以示悼念

只需要在所需元素中加入规则filter: grayscale(1); 即可实现，整个页面的话就加在html元素上

CSS滤镜就像咱们摸鱼人熟悉的很多绘画软件里的滤镜工具，它能使用某种算法，作用于区域内的每一个像素，将一个颜色变成另一个颜色

CSS滤镜filter的取值

  • blur：高斯模糊，取值为长度
  • brightness：亮度，取值为正数，小于1会使图像更暗、大于1会使图像更亮
  • contrast：对比度，取值为正数，小于1会使图像变灰、大于1会增强对比度
  • drop-shadow：沿图像的轮廓生成轮廓阴影，取值为阴影值
  • grayscale：灰度，取值为0~1，数值越大越灰
  • hue-rotate：色相反转，取值为角度值
  • invert：反色，取值为0~1，数值越大反转越大
  • opacity：透明，取值为0~1，数值越大越不透明
  • saturate：饱和度，取值为正数，小于1会变得更不饱和、大于1会变得更饱和
  • sepia：褐色，取值为0~1，数值越大越褐色

这些取值也可以组合使用

1
filter: invert(1) sepia(1);