替换png内的颜色

Question

我有一个网站，我想改变图像的颜色 我有一个像这样简单的png：

<img src="arrow.png" alt="" id="arrow" />

我想改变另一个内部的颜色，如果我想要改变另一个颜色。

我尝试过这种模式但不适用于SVG，不会改变我的图像颜色

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image style=fill:#000000"  xlink:href="arrow.png" />  
</svg>

我需要PHP或javascript或jQuery的解决方案，我在PHP中看过GD库，但是我想将颜色的更改应用到像我的图像这样的id的现有元素。

如何解决这个问题？

Answer 1

我意识到这个问题没有用CSS3标记，但对于那些觉得有用的人，或者根本不知道可以将-mask-box-image与background结合使用来“掩盖”图像的人使用纯色，其他图像，甚至[如本例所示] gradients。鉴于编程可访问性，如果需要，可以使用最少的脚本动态更改。

标记

<div class="arrow"></div>

CSS

.arrow {
     width: 250px;
     height: 250px;
     -webkit-mask-box-image: url('http://i.stack.imgur.com/1jkhG.png');
     background: -webkit-gradient(linear, 38% 0%, 60% 70%, from(#dde9f0), to(#3fc5f8), color-stop(.6,#79b2ec),color-stop(.7,#2e91e5));
}

结果

普拉克

http://plnkr.co/edit/717iDTzblDQfFSkaT2N6?p=preview

显然，了解供应商前缀和支持的环境非常重要。

Answer 2

您可以在Photoshop中剪切黑色部分并使其透明，然后您可以将背景应用于图像：

<img style="background: red;" src="arrow.png">

适用于所有浏览器。

Answer 3

正如其他人所建议你也可以使用SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="arrow" fill="#000000" d="m1,65 h172 l-64,-64 h50 l82,82 -82,82 h-50 l64,-64 h-172z"/>
</svg>

您可以选择带有id的元素并更改填充（或使用style =“fill：＃000000”）。

Answer 4

你无法在飞行中做到这一点。例如，您可以通过PHP脚本生成此图像并将其存储为每种颜色。您可以在本地计算机中进行此操作并将100个图像上载到服务器。或者您可以在服务器上生成它并使用“永久”缓存。例如，使用link arrow.php？color = 000000

脚本将检入名为000000.png的文件夹文件，如果文件存在，则将其传递给浏览器。其他脚本将使用此颜色生成新图像，将其保存到文件000000.png并将其传递给浏览器。