0

我有一个星形图标。我想以未知数量的颜色使用此图标。

有时我需要一颗红星，有时我需要一颗紫星。

我可以使用 Web 服务在服务器上动态创建图像。

我很好奇，有没有什么方法可以控制这个图标的颜色，而无需为我可能需要的每种颜色显式创建图像？

4

4 回答 4

3

您应该使用 glyphicons 或其他类型的基于图标的字体：http: //twitter.github.com/bootstrap/base-css.html#icons

这是一个基于图标的字体的示例：http: //css-tricks.com/examples/IconFont/

于 2013-04-05T17:04:55.587 回答
2

我可以想到三种方法来做到这一点。

  1. 使用您需要的所有不同颜色创建一个精灵表，并移动偏移以更改颜色。这有点作弊。
  2. 使用 Canvas 动态生成图像（啊！）
  3. 使用 SVG，它将响应 CSS 的更改，类似于通过更改 DIV/SPAN 上的类来更改文本显示
于 2013-04-05T17:06:43.263 回答
1

您可以只生成 4 个星形图像：1 个黑色、1 个红色、1 个蓝色和 1 个绿色（如果您有非白色背景，也可以生成 1 个白色）。然后将它们全部堆叠并使用它们的不透明度来获得您想要的颜色。

于 2013-04-05T17:09:58.083 回答
1

使用 SVG 图标，您可以做任何您想做的事情 :)

这是 Raphael JS 库的示例： http ://raphaeljs.com/icons/

于 2013-04-05T17:06:06.823 回答