如何使用CSS更改PNG图像的颜色？

Question

我在网页中有一个图标：

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

我正在尝试使用纯CSS将此图像中的黑色替换为颜色：#2a4f6c。 我尝试使用Photoshop将黑色替换为这种颜色，但效果很糟糕且有颗粒感。是否可能使用纯CSS解决？

下面是相关图片。

- DiamondJoe12

---

你不能更改外部图像的颜色。 - Nisharg Shah

Answer 1

使用图像作为遮罩，你可以这样做:

.img {
  width:150px;
  height:150px;
  display:inline-block;
  background:red;
  -webkit-mask:url("https://i.ibb.co/FhZb3Xs/CJcLK.png") center/contain;
          mask:url("https://i.ibb.co/FhZb3Xs/CJcLK.png") center/contain;
}

img {
  width:150px;
  height:150px;
}

<div class="img"></div>
<div class="img" style="background:#2a4f6c"></div>
<img src="https://i.ibb.co/FhZb3Xs/CJcLK.png" >

- Temani Afif

Answer 2

你无法直接在CSS中更改图像的颜色（SVG、图标除外）。使用各种滤镜来更改颜色，通过更改代码中的hue-rotate 值来获取不同的颜色。

.gavel-icon{
  filter: saturate(500%) contrast(800%) brightness(500%) 
      invert(80%) sepia(50%) hue-rotate(120deg); 
}

- Yadab Sd

---

这个工具将为您生成滤镜：https://angel-rs.github.io/css-color-filter-generator/ - Gavin

Answer 3

你的图标是一个png图像，因此每个像素都单独定义了颜色。与常规HTML元素不同，你无法通过CSS针对整体形状并定义颜色。

然而，有几点需要注意：

1. 我认为在Photoshop中更改这个形状的颜色应该是可行的，而且不会使它看起来比以前更有噪点或像素化。

2. 我建议将其转换为svg。这是一种矢量文件格式，因此与像素图像相比通常具有更小的文件大小，具有完全锐利和清晰的边缘，并且可以缩放到任何尺寸而不降低其质量。并且，对于你来说最重要的是，使用CSS轻松更改其颜色。

3. 你可以尝试使用CSS过滤器来更改png的外观。查看这个stackoverflow问题，看看是否有帮助：Change color of PNG image via CSS?

如我所说，我的推荐选项是使用svg。下面创建了一个代码片段，展示了它的外观 - 你会在代码中找到你的颜色#2a4f6c，如果需要改变图像的颜色，只需更改该颜色值即可。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 1360.6 1077.2" style="enable-background:new 0 0 1360.6 1077.2;" xml:space="preserve">
<style type="text/css">
 .st0{fill:#2a4f6c;}
</style>
<path class="st0" d="M356.4,460l260.4-109.3l-21.8-51.8L334.6,408.1c-13,5.5-19.2,20.5-13.7,33.5l1.9,4.6
 C328.3,459.3,343.3,465.5,356.4,460z"/>
<rect x="614.5" y="239" transform="matrix(0.9059 -0.4236 0.4236 0.9059 -61.7804 311.7127)" class="st0" width="111.8" height="111.8"/>
<path class="st0" d="M706.2,197.3l-131.4,61.4c-3.7,1.7-8.1,0.1-9.9-3.6l-14.1-30.2c-1.7-3.7-0.1-8.1,3.6-9.9l131.4-61.4
 c3.7-1.7,8.1-0.1,9.9,3.6l14.1,30.2C711.5,191.1,709.9,195.5,706.2,197.3z"/>
<path class="st0" d="M786.4,375.5L655,436.9c-3.7,1.7-8.1,0.1-9.9-3.6L631,403.1c-1.7-3.7-0.1-8.1,3.6-9.9L766,331.8
 c3.7-1.7,8.1-0.1,9.9,3.6l14.1,30.2C791.7,369.3,790.1,373.8,786.4,375.5z"/>
<path class="st0" d="M907.2,521.7c1-2,1.5-4.2,1.5-6.5v-18.7c0-8.2-6.6-14.8-14.8-14.8H547.4c-8.2,0-14.8,6.6-14.8,14.8v18.7
 c0,2.3,0.6,4.5,1.5,6.5H907.2z"/>
<path class="st0" d="M941.8,589.8H499.5c-13.3,0-24.1-10.8-24.1-24.1v0c0-13.3,10.8-24.1,24.1-24.1h442.3
 c13.3,0,24.1,10.8,24.1,24.1v0C966,579,955.1,589.8,941.8,589.8z"/>
</svg>

- Run_Script

---

谢谢! 正是我需要的！但是，你有通过什么过程将img转换为svg吗？ - DiamondJoe12

我创建了一个新的Adobe Illustrator文件。然后，我将您的图像加载到其中，并使用Illustrator中的工具进行了描绘。接着，我点击“文件>另存为副本”，并选择了SVG格式。为了获取代码，我使用我常用的代码编辑器（Dreamweaver）打开了SVG文件，并将内容粘贴在这里！ - Run_Script