在实现页面的过程中，我们经常会遇见，同样的一张图标，因为需要他的不同状态，而多次引入，黑色的、彩色的、白色的，最常见的就是tab栏目类。
通过css我们可以只需要一张彩色图片，实现白色、灰色、黑色图标的效果，甚至可以自定义颜色
灰色
使用filter的grayscale属性，调整内容块的灰度，我们可以使具有属性的内容块（图片、文字）转化为灰色
filter: grayscale(1);白色
使用filter的brightness属性，调整内容块的亮度，1为默认值，0为黑色，大于等于2呈现为白色
filter: brightness(3);黑色
刚刚已经讲啦，还是brightness属性
filter: brightness(0);其他单色
通过drop-shadow将对应单色图标投影出来后隐藏原本图标
filter: drop-shadow(2px 19px 0px #44ffdd);其他方式
也可以通过filter的其他取值实现调色板
/* 深褐色(暖色调) */
filter: sepia(50%)
/* 灰色 如国悼时所有网站都是灰色的 */
filter: grayscale(100%);
/* 颜色反转 */
filter: invert(100%)
/* 色相旋转 */
filter: hue-rotate(70deg);
/* 阴影效果 */
filter: drop-shadow(2px 19px 0px #44ffdd);
/* 对比度 */
filter: contrast(50%);
/* 线性乘法 调整亮度 */
filter: brightness(70%);
/* 高斯模糊 比如毛玻璃效果 */
filter: blur(2px);;