2

我有一个网站，我想更改图像的颜色。
我有一个像这样的简单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 的现有元素。

如何解决这个问题？

4

4 回答 4

1

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

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

它适用于所有浏览器。

于 2013-05-23T15:03:22.030 回答
1

我意识到这个问题没有用 CSS3 标记，但是对于那些觉得它有帮助的人，或者那些根本不知道可以-mask-box-image结合使用background以“屏蔽”纯色、其他图像甚至 [as this example显示] 与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

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

于 2013-05-23T14:59:24.550 回答
1

正如其他人建议的那样，您不妨只使用 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"）。

于 2013-05-23T16:56:40.517 回答
0

你不能在飞行中做到这一点。例如，您可以通过 PHP 脚本生成此图像并将其存储为每种颜色。您可以在本地计算机上制作并将 100 张图像上传到服务器。或者您可以在服务器上生成它并使用“永久”缓存。例如使用链接 arrow.php?color=000000

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

于 2013-05-23T15:01:57.667 回答