0

星のアイコンがあります。このアイコンを未知数の色で使用したいです。

赤い星が必要な場合もあれば、紫の星が必要な場合もあります。

Web サービスを使用して、サーバー上に画像を動的に作成できました。

私が興味を持っているのは、必要なすべての色の画像を明示的に作成せずに、このアイコンの色を制御する方法はありますか?

4

4 に答える 4

3

グリフィコンまたはその他の種類のアイコンベースのフォントを使用する必要があります: http://twitter.github.com/bootstrap/base-css.html#icons

アイコンベースのフォントの動作例を次に示します: http://css-tricks.com/examples/IconFont/

于 2013-04-05T17:04:55.587 に答える
2

これを行うには3つの方法が考えられます。

  1. 必要なすべての異なる色を含むスプライト シートを作成し、オフセットをシフトして色を変更します。これはちょっとした詐欺です。
  2. Canvas を使用して画像を動的に生成します (うーん!)
  3. DIV/SPAN のクラスを変更してテキスト表示を変更するのと同様に、CSS の変更に対応する SVG を使用します。
于 2013-04-05T17:06:43.263 に答える
1

生成できる星の画像は、黒 1 つ、赤 1 つ、青 1 つ、緑 1 つ (白以外の背景の場合は白も 1 つ) の 4 つだけです。次に、それらすべてを積み重ねて、不透明度を調整して、必要な色を取得します。

于 2013-04-05T17:09:58.083 に答える
1

SVG アイコンを使えば、やりたいことが何でもできます :)

Raphael JS ライブラリの例を次に示します: http://raphaeljs.com/icons/

于 2013-04-05T17:06:06.823 に答える