如何使用CSS替换PNG图像的颜色？ [英] How to replace color of PNG image using CSS?
问题描述
我在网页上有一个图标：
I have an icon in a webpage:
<div class='icon-container'>
<img src = "img/gavel3.png" class="gavel-icon" style='vertical-align:center;width:80px;'>
</div>
我正在尝试用以下颜色替换此图像中的黑色：＃2a4f6c 仅使用CSS。我尝试使用Photoshop用这种颜色替换黑色，它看起来很糟糕且颗粒状。可以使用纯CSS解决方案吗？
I'm trying to replace the black in this image with the color: #2a4f6c using CSS only. I tried to replace the black with this color using Photoshop, and it looks awful and grainy. Is a solution possible using pure CSS?
以下有问题的图像。
推荐答案
您的图标是 png 图片，因此每个像素分别定义为有自己的颜色。您无法像使用常规HTML元素那样使用CSS定位整个形状并定义颜色。
Your icon is a png image, so each pixel is defined separately to have its own color. There are no whole shapes that you can target with css and define a color, as you would for regular HTML elements.
但是，我有几句话要说：
However, there I a few things I would say:
-
我本以为应该可以在photoshop中更改此形状的颜色而不会使它看起来更粗糙
I would have thought that it should be possible to change the color of this shape in photoshop without making it look any more grainy or pixelated than before.
我建议将其制作为 svg 。这是矢量文件格式，因此与像素图像相比，它的文件大小通常较小，具有完全清晰的边缘，并且可以按比例缩放到任意大小而不会降低其质量。而且，对您而言最重要的是，使用CSS更改颜色非常容易。
I would suggest making this into an svg. This is a vector file format, so it generally has a smaller file size compared to pixel images, has completely sharp and defined edges, and can be scaled up to any size without reducing its quality. And, most importantly for you, it's very easy to change its color with CSS.
您可以尝试使用CSS过滤器更改<$ c的外观$ c> png 。看看这个stackoverflow问题，看看是否有帮助：通过CSS更改PNG图像的颜色？
You could try using CSS filters to change the appearance of your png. Check out this stackoverflow question to see if it helps: Change color of PNG image via CSS?
正如我所说的， svg 是我推荐的选项。我在下面创建了一个代码段–您将在代码中找到颜色＃2a4f6c ，因此，如果要更改图像，只需进行更改即可再次具有不同的颜色。
As I've said, an svg would be my recommended option. I've created a code snippet below of what that would look like – you'll find your color #2a4f6c in the code, so just change that if you want the image to have a different color again..
<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>
这篇关于如何使用CSS替换PNG图像的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
