如何使用CSS替换PNG图像的颜色？ [重复]

Question

我在网页上有一个图标：

<div class='icon-container'>
    <img src = "img/gavel3.png" class="gavel-icon" style='vertical-align:center;width:80px;'>
</div>

我正在尝试用以下颜色替换此图像中的黑色：#2a4f6c仅使用CSS。我尝试使用Photoshop将黑色替换为这种颜色，它看起来糟透且粒状。如果这里有使用纯CSS的解决方案，将不胜感激！

下面有问题的图像。谢谢。

Answer 1

您的图标是png图像，因此每个像素分别定义为具有自己的颜色。无法像使用常规HTML元素那样使用CSS定位和定义颜色的整个形状。

Answer 2

2
投票

使用图像作为遮罩，您可以这样做：

Answer 3

您不能直接在CSS中更改图像颜色。（svg，可以显示图标）使用各种滤镜更改颜色，更改代码中的hue-rotate值以获得各种颜色；