更改背景圖片的顏色（png）

Question

我在我的網站上有以下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。 是否可以為該圖像着色（但不能為整個href背景文本着色）？

Answer 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> 

您可以在此處找到如何開始使用Font Awesome的項目。

否則，您可以使用Temani Afif提到的filter屬性。 他的鏈接 。 進一步閱讀