在CSS中将黑色图标变为灰色？

1. CSS中改变图标颜色的方法

在CSS中改变图标颜色的方法有多种，本文将介绍以下两种方法：

1.1 方法一：使用CSS filter

使用CSS filter可以改变图片的颜色，需要使用如下CSS样式：

.icon {
  filter: grayscale(100%);
}

其中，grayscale()函数可以将图像变灰，值越大，图像就越灰。例如，grayscale(100%)将图像转换为完全灰度图像，而grayscale(0%)则不会改变图像。

需要注意的是，grayscale()在IE中不被支持，因此如果需要在IE中使用该方法，可以考虑使用SVG代替图片，并使用SVG filter来改变颜色。

1.2 方法二：使用CSS mix-blend-mode

CSS mix-blend-mode可以实现图片和背景混合的效果，从而改变图片的颜色。需要使用如下CSS样式：

.icon {
  mix-blend-mode: luminosity;
  color: #7a7a7a;
}

其中，mix-blend-mode指定混合模式的属性值，luminosity表示使用颜色亮度来混合背景。color指定混合背景的颜色，可以是十六进制、RGB、RGBA等。

需要注意的是，mix-blend-mode不被IE浏览器支持，如果需要在IE中使用该方法，可以考虑使用HTC（HTML Component）代替。

2. 实例演示

为了更好地演示上述两种方法，我们先来准备一张黑色图标的图片，如下图所示。

接下来，使用上述两种方法来改变图片颜色。

2.1 方法一：使用CSS filter

使用CSS filter将该图标变为灰色，需要在CSS中添加如下代码：

.icon {
  filter: grayscale(100%);
}

改变后的图标如下所示：

2.2 方法二：使用CSS mix-blend-mode

使用CSS mix-blend-mode将该图标变为灰色，需要在CSS中添加如下代码：

.icon {
  mix-blend-mode: luminosity;
  color: #7a7a7a;
}

改变后的图标如下所示：

3. 总结

本文介绍了两种在CSS中改变图标颜色的方法，分别是使用CSS filter和CSS mix-blend-mode。使用CSS filter可以将图像转换为灰度图像，而CSS mix-blend-mode可以实现背景和图像的混合效果，从而改变图像颜色。需要注意的是，这两种方法在不同浏览器和不同环境中的支持情况不同，需要视情况而定。因此，在使用这两种方法时，需要考虑浏览器兼容性和目标用户的使用环境，选择合适的方法。