如何用CSS替换PNG图片的颜色?[重复]


我在一个网页上有一个图标。

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

我想把这个图片中的黑色替换成彩色的: #2a4f6c 只用CSS来代替 我试着用photoshop把黑色替换成这个颜色,但看起来很糟糕,而且颗粒感很强。 如果这里有什么使用纯CSS的解决方案,那就非常感谢了!

下面是问题图片。 谢谢。

enter image description here

解决方案:

你的图标是一个 png 图像,所以每个像素都被单独定义为有自己的颜色。没有一个整体的形状,你可以用css瞄准并定义一个颜色,就像你对普通的HTML元素一样。

然而,有几件事我想说。

  1. 我认为应该可以在photoshop中改变这个形状的颜色 而不至于让它看起来比以前更有颗粒感或像素化。

  2. 我建议把它做成一个 svg. 这是一种矢量文件格式,所以与像素图像相比,它的文件大小一般较小,边缘完全锐利、清晰,可以在不降低质量的情况下放大到任何尺寸。而且,对你来说最重要的是,用CSS改变它的颜色非常容易。

  3. 你可以尝试使用CSS滤镜来改变你的图片的外观。png. 看看这个stackoverflow的问题,看看是否有帮助。通过CSS改变PNG图片的颜色?

正如我所说,一个 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>

本文来自投稿,不代表运维实战侠立场,如若转载,请注明出处:https://www.shizhanxia.com/173.html

(0)
上一篇 2022年6月29日 下午3:53
下一篇 2022年6月29日 下午3:53

相关推荐

发表评论

登录后才能评论