更改背景图像的颜色 (png)答案

【问题标题】：Change color of a background image (png)更改背景图像的颜色 (png)
【发布时间】：2019-04-29 08:58:41
【问题描述】：

我的网站上有以下 CSS 选择器，用于为每个未指向我自己域 (https://stackoverflow.com/a/55891382/257617) 的 href 添加外部链接图标：

a[class=" external-link"]::after {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
    position: relative;
    top: -3px;
    margin: 0 3px 0 5px;
}

这是一张灰色图像，但链接的其余部分以#0273d4 作为颜色。是否也可以为该图像着色（但不是整个 a href 背景文本）？

【问题讨论】：

使用过滤器：stackoverflow.com/a/54802632/8620333
我同意 Temani Afif，使用 filter 属性。首先将 img{hue-rotate(90deg);} 添加到您的 CSS 文件中，然后根据自己的喜好调整颜色偏移的度数 (0-360)。

标签： html css png

【解决方案1】：

你可以使用一些链接 Font Awesome，它可以让你自定义图标的外观，就像它是文本一样。

.blue {
  color: #0273d4
}

.red {
  color: red
}

.green {
  color: green
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<ul>
  <li><a class="blue" href="#">External Link <i class="fas fa-external-link-alt"></i></a></li>
  <li><a class="red" href="#">External Link <i class="fas fa-external-link-alt"></i></a></li>
  <li><a class="green" href="#">External Link <i class="fas fa-external-link-alt"></i></a></li>
</ul>

您可以在您的项目here 中找到如何开始使用 Font Awesome。

否则，您可以使用 Temani Afif 提到的过滤器属性。 His Link。 Further Reading

【讨论】：