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

Posted

技术标签:

【中文标题】如何使用 CSS 替换 PNG 图像的颜色? [复制]【英文标题】:How to replace color of PNG image using CSS? [duplicate] 【发布时间】:2020-08-05 19:09:20 【问题描述】:

我在网页中有一个图标:

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

我正在尝试将此图像中的黑色替换为颜色:#2a4f6c,仅使用 CSS。我尝试使用 Photoshop 用这种颜色替换黑色,它看起来很糟糕而且有颗粒感。是否有可能使用纯 CSS 的解决方案?

下面有问题的图片。

【问题讨论】:

你不能改变外部图像的颜色 【参考方案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" >

【讨论】:

【参考方案2】:

您不能直接在 css 中更改图像颜色。 (svg,图标是可能的) 使用各种滤镜改变颜色,在代码中改变hue-rotate的值得到各种颜色;

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

【讨论】:

【参考方案3】:

您的图标是png 图像,因此每个像素都被单独定义为具有自己的颜色。没有像常规 html 元素那样可以使用 css 定位并定义颜色的完整形状。

不过,我想说几句:

    我原以为应该可以在 Photoshop 中更改此形状的颜色,而不会使其看起来比以前更粗糙或像素化。

    我建议将其设为svg。这是一种矢量文件格式,因此与像素图像相比,它通常具有较小的文件大小,具有完全清晰和明确的边缘,并且可以放大到任何大小而不会降低其质量。而且,对您来说最重要的是,使用 CSS 更改颜色非常容易。

    您可以尝试使用 CSS 过滤器来更改 png 的外观。查看这个 *** 问题,看看它是否有帮助:Change color of PNG image via CSS?

正如我所说,svg 是我推荐的选项。我在下面创建了一个代码 sn-p,它看起来像 - 你会在代码中找到你的颜色 #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">
	.st0fill:#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"  />
<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>

【讨论】:

谢谢!正是我需要的!但是,有没有将 img 转换为 svg 的过程? 我创建了一个新的 adobe illustrator 文件。然后我将您的图像加载到其中并使用 illustrator 中的工具对其进行跟踪。然后我点击File &gt; Save a Copy 并选择 svg 作为格式。为了获取代码,我用我使用的代码编辑器(dreamweaver)打开了 svg 并将内容粘贴到这里!

以上是关于如何使用 CSS 替换 PNG 图像的颜色? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 CSS(jQuery SVG 图像替换)更改 SVG 图像的颜色?

使用 CSS 更改 .png 颜色 [重复]

使用遮罩更改 UIImage 的颜色并将该图像替换为彩色图像

在 CSS 或 JavaScript 中反转图像的颜色

使用 css3 进行图像替换和过渡?

替换 PNG 文件中的颜色