rundes bild einbinden

  • Hallo,
    wenn ich so ein rundes Bild einbinde (Anlage),
    habe ich bisher den Hintergrund Bild und Website gleich gestaltet.
    Aber gibt es auch eine andere Möglichkeit runde Bilder einzubinden ohne
    den Hintergrund des Bildes?
    Bei Farbunterschiede gibt es sonst die "Ecken" in der Darstellung/Browser.


    gerhard

  • Hallo,


    für dein Problem gibt es verschiedene Lösungen. Welche für dich sinnvoll ist hängt von deinen Ansprüchen (Farbverläufe, Farbanzahl und Schatten) ab.


    Du hast leider nichts zu dem Bildformat geschrieben.


    1. png-Datei mit transparentem Hintergrund (transparent = durchsichtig)


    Die Grafik kann als png-Datei gespeichert werden. Anschließend wird der Hintergrund transparent gemacht.


    Vorteil: geht mit fast jedem Bildbearbeitungsprogramm


    Nachteil: Da es sich um eine Pixelgrafik handelt wird die Grafik beim Vergrößern pixelig und wirkt beim Verkleinern manchmal unscharf


    2. svg-Datei mit transparentem Hintergrund


    Die Grafik wird als svg-Datei gesucht oder erstellt.


    Vorteil: Eine Skalierung (Vergrößerung und Verkleinerung) ist problemlos möglich.


    Nachteil: Eine einfache Umwandlung von anderen Grafikformaten zu svg ist nicht so einfach.


    3. Icon-Font


    Die Grafik wird als Icon-Font gesucht oder erstellt.


    Vorteil: Eine Skalierung (Vergrößerung und Verkleinerung) ist problemlos möglich.


    Nachteil: Eine einfache Umwandlung von anderen Grafikformaten zu Icon-Fonts ist nicht so einfach. Farbverläufe und Schatten gibt es meiner Kenntnis nach nicht.


    4. Grafik beschneiden und CSS


    Die Grafik kann so beschnitten werden, dass sie oben, unten und seitlich keine Abstände enthält. Die Rundung und ein vereinfachter Schatten werden dann mit CSS (border-radius und ::before oder ::after) erstellt.


    Gruss


    MrMurphy

  • Hallo,
    meine Versuche haben nicht ganz geklappt.
    ich habe hier einen png datei und der hintergrund ist anscheinend nicht transparent.
    das mit dem border-radius bringt hier nichts, da damit nur die ecken rund werden, siehe anlage.
    das hatte ich nur getestet.


    aber der code für background-color geht auch nicht, das wundert mich, geht das vermutlich auch nicht,
    wenn die Datei nicht transparent ist???

    Code
    .XXX2 {
    	background-color: rgb(204,255,102);
    	width: 250px;
    	heigth: 250px;
    }


    wenn ich es jetzt richtig sehe, wäre es besser die Datei mit anderen eigenschaften (z.B. transparent) zu versehen.


    mfg
    gerhard

  • Hallo


    Zitat

    wenn ich es jetzt richtig sehe, wäre es besser die Datei mit anderen eigenschaften (z.B. transparent) zu versehen


    Wenn du mit den anderen Möglichkeiten nicht klar kommst kannst du das so machen.


    Gruss


    MrMurphy

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!