Kann ich ein Bild in CSS3 konvertieren?

Question

die Annahme, dass ich eine Polygon Bild PNG-Datei wie diese habe (keine Grenze, wird die Form mit einer Farbe gefüllt, kein Gefälle, und Hintergrund des Bildes ist transparent) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF

Ich denke, dass Polygon Bild des Verwendens als Hintergrundbild und es wird geändert (zu einem anderen Bild mit anderer Farbe), wenn der Benutzer darauf schwebt.

Aber ich möchte auch die Farbe des Hintergrundbildes anpassbar sein. Also, ich denke, wenn es eine Möglichkeit gibt, das Polygon zu zeichnen, anstatt Bilddateien zu verwenden, so dass die Farbe anpassbar sein wird (ich denke nicht, dass es eine gute Idee ist, eine Datei für eine Farbe usw. zu erstellen) .

• Was ist die beste Lösung für diesen Fall? Mit Png oder Zeichnung von CSS?
• Gibt es ein Tool/eine Website, um meinen PNG in CSS-Code umzuwandeln?

Answer 1

1. Machen Sie die weißen Bereiche transparent (Farbe alpha in GIMP)
2. Convert the image to a data URI (es ist optional, aber es wird Ihre Website schneller geladen wird)
3. die URL in (2) als die background-image und Verwenden Sie eine beliebige background-color.

Answer 2

verwenden um ein Bild zu konvertieren: http://codepen.io/blazeeboy/pen/bCaLE Ich denke, es ist viel besser konvertierten Bilder zu verwenden, da Browser sie schneller laden.

Answer 3

Ich denke, CSS ist die falsche Sache dafür zu verwenden. Ja, es ist möglich, viele Formen mit CSS zu erstellen, aber es gibt Einschränkungen, und in jedem Fall ist das Zeichnen von Formen mit CSS ein bisschen ein Hack, selbst wenn es nur ein einfaches Dreieck ist.

Anstatt CSS, würde ich vorschlagen, SVG ist das geeignete Werkzeug für diesen Job.

SVG ist ein Grafikformat für Vektorgrafiken, das in eine Site eingebettet werden kann und über Javascript direkt auf der Site erstellt oder geändert werden kann. Ändern der Farbe und Form eines einfachen Polygons ist so einfach wie es mit SVG ist.

Der andere Vorteil der Verwendung von SVG ist, dass es skalierbar ist, weil es eine Vektorgrafik ist, so dass Sie es in jeder Größe anzeigen können.

Die einzige Nachteil von SVG ist, dass es nicht von alten Versionen von IE (IE8 und früher) unterstützt wird. Diese Browser unterstützen jedoch eine alternative Sprache, die VML genannt wird, und mehrere gute Javascript-Bibliotheken existieren, die mit beiden funktionieren und Ihnen so die vollständige browserübergreifende Kompatibilität ermöglichen. Die eine, die ich empfehlen würde, ist Raphael.js.

Also ein kleines (und sehr einfaches) bisschen Javascript-Code anstelle eines sehr unordentlichen Bits von CSS. Scheint wie ein Gewinner für mich.