一夜之间所有网站app都灰掉 你知道怎么实现吗？

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

css filter

前言

每次有一些国家级别的大事。都会灰掉一些官网app等。今天在刷掘金的时候。忽然就对这个的实现感到好奇。
点开检查工具查看一番。

html.gray-mode {

  filter: grayscale(.95);
  -webkit-filter: grayscale(.95);

}

竟然只通过一行代码实现了。我以前还真没接触过这个css属性。作为一个多年前端工程师。不知道实在不应该。所以认真研究一番。

看完mdn上面的介绍css filter，原来这个功能就像我们女孩子拍照片之后。要修图。给图片添加滤镜的功能一样。在html根元素或者是父元素添加此行样式，就是实现对网站添加滤镜。让网站变灰。既然是滤镜属性。那应该功能不止于此。

filter能实现的功能

我们用这张图片来小小的测试一下

• 模糊图片
  

img {
  filter: blur(5px);
}

• 背景模糊

img.background {
  filter: blur(35px);
}

• 变更图片亮度

img {
  filter: brightness(200%);
}

• 调整对比度

img {
  filter: contrast(200%);
}

• 图片添加阴影

img {
  filter: drop-shadow(8px 8px 10px gray);
}

• 灰阶

img {
  filter: grayscale(50%);
}

• 反转

img {
  filter: invert(100%);
}

• 不透明

img {
  filter: opacity(30%);
}

• 调整饱和度

img {
  filter: saturate(800%);
}

• 多重滤镜

img {
  filter: contrast(200%) brightness(150%);
}

全部效果就是这样子啦~

filter兼容性

在打开多个网站查看之后。发现我们的国民搜索在百度官网，在搜索功能文字和图片这块的处理都是单独通过样式控制来实现的。第一时间就想到了兼容性，赶紧去查了一下

打开我们的国民搜索网站 在caniuse网站上面查了一下兼容性filter 兼容性。除了ie，对于其他浏览器内核的兼容性都挺好的。 在ie上面打开百度。其他通过filter实现灰色的功能都被移除了。

再打开掘金看看

我们的掘金并不完全支持ie浏览器。

对于不需要兼容ie浏览器的可以直接放心使用filter该属性来实现了。

对于需要支持ie浏览器的，则需要做一些特殊的处理。