有没有办法动态改变图标的​​颜色?

时间:2013-04-05 17:03:54

标签: javascript jquery html css

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

有时我需要一颗红星,有时候是紫星。

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

我很好奇,有没有办法控制这个图标的颜色而没有为我可能需要的每种颜色明确创建图像?

4 个答案:

答案 0 :(得分:3)

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

以下是基于图标的字体的示例:http://css-tricks.com/examples/IconFont/

答案 1 :(得分:2)

我可以想到三种方法。

  1. 创建一个包含您需要的所有不同颜色的精灵表,并移动偏移以更改颜色。这有点作弊。
  2. 使用Canvas(唉!)
  3. 动态生成图像
  4. 使用SVG,它将响应CSS的更改,类似于通过更改DIV / SPAN上的类来更改文本显示

答案 2 :(得分:1)

使用SVG图标,您可以随心所欲:)

这是Raphael JS Library的一个例子: http://raphaeljs.com/icons/

答案 3 :(得分:1)

你可以只生成4个星形图像:1个黑色,1个红色,1个蓝色和1个绿色(如果你有非白色背景,也可能是1个白色)。然后叠加所有这些并使用它们的不透明度来获得你想要的颜色。