![在这里插入图片描述](https://img-blog.csdnimg.cn/3862cb7c9e41412e8c66a19157ad3637.png

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

filter :CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。(其实就是滤镜的意思)

filter: grayscale(100%);

// 这是bilibli上面灰色处理的代码
html.gray {/* filter: grayscale(85%) saturate(80%); *//* -webkit-filter: grayscale(85%) saturate(80%); */-moz-filter: grayscale(85%) saturate(80%);-ms-filter: grayscale(85%) saturate(80%);-o-filter: grayscale(85%) saturate(80%);/* filter: url(data:image/svg+xml;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); */filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=.85);/* -webkit-filter: grayscale(.85) saturate(.8); */
}