如何使用CSS让一张图片拥有多个样式

通过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);;