我的网站上有以下 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 背景文本)?
最佳答案
您可以使用一些链接 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 here .
否则,您可以使用 Temani Afif 提到的过滤器属性。 His Link . Further Reading
关于html - 更改背景图像的颜色 (png),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55894425/