Kann ich konvertieren Sie ein Bild in CSS3?

Angenommen, ich habe ein polygon-Bild PNG-Datei wie folgt (Keine Grenze, die Form ist gefüllt mit einer Farbe, ohne Steigung, und der hintergrund des Bildes transparent ist) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF

Ich bin denken mit, das polygon-Bild als hintergrund und es wird geändert (auf ein anderes Bild mit unterschiedlichen Farben), wenn der Benutzer mit der Maus auf Sie.

Aber ich möchte auch die Farbe der Hintergrundbild anpassbar zu sein. Also, ich denke, wenn es irgendeine Möglichkeit zum zeichnen des Polygons anstelle der Verwendung von Bild-Dateien, so dass die Farbe wird konfigurierbar sein (ich glaube nicht, dass es eine gute Idee, um erstellen Sie eine Datei für eine Farbe und so weiter so weiter).

  • Was ist die beste Lösung für diesen Fall? Die Verwendung von png oder Zeichnung von css?
  • Gibt es ein tool/website meine konvertieren png zu css-code?
InformationsquelleAutor Atthapon Junpun-eak | 2013-08-11
  1. 9
    1. Machen die weißen Flächen transparent (Farbe, alpha in GIMP)
    2. Konvertieren Sie das Bild in eine data-URI (es ist optional, aber es wird Ihre Website schneller geladen)
    3. Verwenden Sie die url in (2) als background-image Sie und verwenden Sie background-color Sie wollen.
    • Ich habe versucht, Ihren Weg und legen Sie hintergrund-Farbe auf rot, aber es funktioniert nicht. Siehe mein jsfiddle. jsfiddle.net/K44mE/499 Wie kann ich die grauen polygon zu ändern, z.B. rot polygon?
    • jsfiddle.net/nabil_kadimi/K44mE/500
    • Die richtige Art und Weise zu kommentieren css-code ist /* padding: 10px; */
    • Und geben Sie den code (auch wenn ein wenig schwer zu Lesen) tut, was man von ihm erwarten, fügen Sie background-color nur auf hover(:hover)
    • Danke, aber ich meine zu ändern, die grauen polygon selbst zu roten polygon. Nicht zu ändern, der hintergrund rot.
    • Stellen Sie den polygon-form transparent und Umgebung plain, nicht die Umkehrung.
    • Ich sehe Ihren Punkt. Aber das bedeutet, dass der übergeordnete hintergrund muss dauerhaft "weiß" (in diesem Fall). Was, wenn ich die übergeordneten hintergrund anpassbar zu sein auch? Also, das ist ein trade-off?
    • Ja... Sorry ))
    • Dank Nabil, entschied ich mich schließlich zu gehen mit Ihrer Lösung. Es ist der einfachste Weg, und es funktioniert mit cross-browser.

    InformationsquelleAutor Nabil Kadimi
  2. 4

    Verwenden Sie diese um ein Bild zu konvertieren: http://codepen.io/blazeeboy/pen/bCaLE
    Ich denke, es ist viel besser zu bedienen konvertiert Bilder, da Browser laden Sie schneller.

    • Danke für das tool. Es ist für mich nützlich, obwohl. Allerdings hab ich noch zum generieren von 1 Bild pro 1 Farbe?
    • Ich möchte damit auch nur eine Form als hintergrund-Bild und ändert nur seine Farbe, wenn die Maus. Ist es möglich?
    • Wenn ich die Frage richtig verstanden habe, hast du mehrere Möglichkeiten, das zu tun: 1. Verwenden Sie JS zum ändern der Farbe in Ihrem Bild, das Sie wollen. 2. Machen Sie zwei Bilder und dann ändern Sie Sie, wenn Sie gemacht wird, etwas zu bewegen. 3. Machen Sie ein sprite und manipulieren. ... Es ist wirklich Ihre Wahl, was zu tun ist 🙂
    • Können wir ändern die Farbe eines Bildes mit javascript? Ich habe nie gewusst, dass es vor. Haben Sie Beispiele online?
    • Habe ich ein Beispiel stackoverflow.com/questions/9303757/...
    InformationsquelleAutor Ugnius Malūkas
  3. 2

    Ich glaube CSS ist die falsche Sache zu benutzen. Ja, es ist möglich, erstellen Sie eine Menge von Formen mit CSS, aber es gibt Grenzen, und in jedem Fall das zeichnen von Formen mit CSS ist ein bisschen ein hack, auch wenn es nur ein einfaches Dreieck.

    Eher als CSS würde ich vorschlagen, SVG ist mit den entsprechenden tools für diese Aufgabe.

    SVG ist ein Grafik-format für Vektor-Grafiken, das einbetten in eine Website und kann erstellt werden oder verändert werden via Javascript direkt innerhalb der Website. Ändern Sie die Farbe und die Form ein einfaches polygon ist ungefähr so einfach, wie es wird mit SVG.

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

    Die einzige down-Seite von SVG ist, dass es nicht unterstützt, die mit alten Versionen des IE (IE8 und älter). Jedoch, diese Browser unterstützen eine alternative Sprache namens VML, und mehrere gute Javascript-Bibliotheken existieren, die entweder mit zu arbeiten, so dass Sie vollständige cross-browser-Kompatibilität. Die, die ich empfehlen würde, ist Raphael.js.

    So einer kleinen (und sehr einfachen) etwas Javascript code statt einer sehr chaotisch bisschen CSS. Scheint wie ein Gewinner für mich.

    • Vielen Dank für das teilen sehr gute Idee. Allerdings hab ich das Gefühl, dass wir tun, zu komplizierte Sache für nur eine kleine Sache. Ich würde nur zu gerne einen button, mit dem polygon-Form und seine Farbe ändern, wenn die Maus es. aber ich will nicht ein neues Bild erstellen für jedes schwebende Farbe, die ich haben will. Gibt es eine andere Möglichkeit?
    InformationsquelleAutor Spudley
  4. 0

    Vielleicht u kann mit dieser: https://javier.xyz/img2css/, das Prinzip ist box-shadow,es ist in Ordnung, wenn das Bild klein ist, so u sollte überlegen, Leistung

    InformationsquelleAutor Rumeng Li
Schreibe einen Kommentar