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

*Published:* 2023-12-09
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2023年12月9日，已超过 180天没有更新



通过[css](https://www.xarjtc.com/tag/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);;
```