CSS 使用CSS给黑色图标上色

在本文中，我们将介绍如何使用CSS来改变黑色图标的颜色。CSS（层叠样式表）是一种用于描述网页（或其他文档）的布局和样式的语言。通过使用CSS，我们可以轻松修改网页中的各种元素的外观和风格，包括黑色图标。

阅读更多：CSS 教程

包含黑色图标的HTML

在开始改变黑色图标的颜色之前，我们首先需要在HTML中添加黑色图标的代码。通常，黑色图标是以SVG（可缩放矢量图形）格式提供的，因为这种格式在不失真的情况下可以缩放到任意尺寸。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="black" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm2-12h-4v6H8l4 4 4-4h-2z"/>
</svg>

以上是一个黑色的箭头图标代码示例。注意其中<path fill="black">指定了图标的填充色为黑色。我们将通过CSS改变这个颜色。

使用CSS改变图标颜色

使用fill属性

要将黑色图标的颜色改变为其他颜色，我们可以使用CSS的fill属性。fill属性用于指定元素的填充色，适用于包含矢量图形的元素。

svg path {
  fill: red;
}

以上CSS代码将把图标的填充色改为红色。我们选择了svg path选择器，因为黑色图标通常是通过<path>元素来定义的。通过指定fill属性为红色，我们成功地改变了图标的颜色。

使用filter属性

除了使用fill属性，我们还可以使用filter属性来改变黑色图标的颜色。filter属性允许我们对元素应用不同的图形效果，包括改变颜色、模糊等。

svg {
  filter: invert(100%) sepia(100%);
}

以上CSS代码将利用filter属性将图标的颜色反转成相反色。通过invert(100%)，我们使图标的颜色完全反转。通过sepia(100%)，我们使图标呈现出深褐色的效果。这样，我们成功地改变了黑色图标的颜色。

使用伪元素

除了直接在HTML中添加图标代码并使用CSS来改变颜色，我们还可以使用伪元素来创建黑色图标并改变其颜色。伪元素是通过CSS创建的虚拟元素，它可以用于在元素之前或之后插入内容。

.icon::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: blue;
  mask: url('icon.svg') no-repeat center;
  -webkit-mask: url('icon.svg') no-repeat center;
  mask-size: cover;
  -webkit-mask-size: cover;
}

以上CSS代码通过在.icon选择器后使用::before伪元素来创建一个图标。我们通过设置content为空，并将display属性设置为inline-block，以便正确显示伪元素。

然后，我们使用background-color属性将图标的背景色设置为蓝色。同时，在mask和-webkit-mask属性中，我们使用url('icon.svg')指定了图标的URL，以及no-repeat center来设置图标在伪元素内的放置方式。

最后，我们通过设置mask-size和-webkit-mask-size属性为cover，使图标能够自适应伪元素的尺寸。

通过以上代码，我们成功地创建了一个蓝色的图标并插入到.icon元素之前。通过修改background-color属性，我们可以将图标的颜色改变为其他任意颜色。