迷津渡口

今日清明，愿天下清明。

致敬为疫情奋斗的所有人，为烈士哀祷，为仍奋斗在一线的医生护士和工作人员加油。

乘风破浪会有时，直挂云帆济沧海。

今天大部分的网站app都实现了整站灰化的效果，其实是利用一个CSS的样式实现的，兼容性较好的实现方式如下：

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

filter可添加模糊或颜色偏移等图形效果，它其实还有很多用途：

• 添加SVG滤镜

filter: url(resources.svg#c1);

• 给图像设置高斯模糊

filter: blur(5px);

• 调节亮度

filter: brightness(0.5);

• 调节对比度

filter: contrast(200%);

• 添加阴影效果

filter: drop-shadow(16px 16px 10px black);

• 旋转图像的色相

filter: hue-rotate(90deg);

• 反转图像

filter: invert(100%);

• 添加图像透明度

filter: opacity(50%);

• 转换图像的饱和度

filter: saturate(200%);

• 转换图像为深褐色

filter: sepia(100%);

具体可查看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter