有沒有辦法動態改變圖標的顏色？

我有一個星形圖標。我想以未知數量的顏色使用此圖標。有沒有辦法動態改變圖標的顏色？

有時我需要一顆紅色的星星，有時候是一顆紫色的星星。

我可以使用Web服務動態地在服務器上創建圖像。

什麼我很好奇，有沒有什麼辦法來控制這個圖標的顏色，而不用爲我可能需要的每種顏色明確地創建一個圖像？

來源

2013-04-05 BentOnCoding

也許你可以做一個帶有透明度的圖標，並改變背景的顏色。 – FishBasketGordo 2013-04-05 17:05:04

使用畫布對象或透明圖像並更改背景顏色。 – 2013-04-05 17:05:12

您應該使用glyphicons或一些其他類型的基於圖標的字體：http://twitter.github.com/bootstrap/base-css.html#icons

這裏的行動基於圖標的字體的例子：你想要的任何http://css-tricks.com/examples/IconFont/

來源

2013-04-05 17:04:55 chrislondon

爲什麼有人會低估這一點？我認爲這是最好的解決方案...（假設圖標具有備用方法，我使用的網站是這樣） – 2013-04-05 17:06:07

我不明白爲什麼建議使用glyphicons。它們是精靈，意思是說，你需要爲每一種顏色選擇一個新的顏色，而且不能動態地完成，而且無論如何只能以某種顏色出現 - 所有OP要求的都不是。而glyphicons不是一個基於圖標的字體 - 它們是精靈。此外，基於圖標的字體很酷，但似乎只有一組您可以使用的特定圖標。如果有需要的自定義圖標怎麼辦？ – Ian 2013-04-05 17:16:19

那麼創建你自己的圖標字體？看起來對我來說很簡單：http://www.intridea.com/blog/2012/4/24/symbol-font。只要圖標是單色，這是獲得OP所需的最簡單的方法。 – cimmanon 2013-04-05 17:22:31

SVG的圖標，你可以做:)

下面是與拉斐爾JS庫的例子： http://raphaeljs.com/icons/

來源

2013-04-05 17:06:06

爲什麼這會降低投票率？ – Michael 2013-04-05 17:09:07

鏈接已損壞。（只是評論不是邁克爾問題的答案） – chrmcpn 2017-08-15 15:57:18

答案或chrislondon更好 – 2017-08-16 17:29:06

我能想到的三種方式來做到這一點。

用你需要的所有不同顏色創建一個精靈表，並且移位偏移來改變顏色。這有點作弊。
動態生成使用Canvas圖像（啊！）
使用SVG，這將通過更改DIV/SPAN

來源

2013-04-05 17:06:43 PaulProgrammer

的類類似於更改文本顯示更改CSS迴應

您可以生成只有4星級的圖像：1黑色，1紅色，1藍色和1綠色（如果您有非白色背景，也可能是1白色）。然後堆疊所有這些，並與他們的不透明度，以獲得你想要的顏色。

來源

2013-04-05 17:09:58 Uby

有沒有辦法動態改變圖標的​​顏色？

回答

相關問題

有沒有辦法動態改變圖標的顏色？