css - 画像を CSS3 に変換できますか?

Question

このようなポリゴン画像のPNGファイルがあるとします（境界線なし、形状は1色で塗りつぶされ、グラデーションなし、画像の背景は透明です）http://www.enchantedlearning.com/crafts/books/shapes/ GIF/4.GIF

そのポリゴン画像を背景画像として使用することを考えています。ユーザーがカーソルを合わせると、(別の色の別の画像に) 変更されます。

しかし、背景画像の色もカスタマイズ可能にしたい. そこで、画像ファイルを使用する代わりにポリゴンを描画して、色をカスタマイズできるようにする可能性があるかどうかを考えています (1 つの色に対して 1 つのファイルを作成するのは得策ではないと思います)。 .

• この場合の最善の解決策は何ですか? png を使用するか、css で描画しますか?
• 私のpngをcssコードに変換するツール/ウェブサイトはありますか?

Answer 1

1. 白い部分を透明にします（GIMPで色をアルファに）
2. 画像をデータ URI に変換します(オプションですが、サイトの読み込みが速くなります)
3. (2) の URL を として使用し、必要に応じbackground-imageて使用しbackground-colorます。

Answer 2

これを使用して画像を変換します: http://codepen.io/blazeeboy/pen/bCaLE ブラウザは画像をより速くロードするため、変換された画像を使用する方がはるかに優れていると思います。