Hintergrundbild opacity ändern?!?

    Hallo zusammen,


    ich habe den <body> meiner Seite mit einem Hintergrundbild belegt.
    Innerhalb des Body´s liegt logischerweise eine Navzeile, der Inhalt sowie ein footer.
    Jetzt würde ich gerne das Hintergrundbild etwas transparenter gestalten, stoße aber auf Schwierigkeiten. Geht das überhaupt?
    Oder muss ich die ganze Struktur der Seite umwerfen?


    Grüße,
    Michael

    Dadurch, dass das Hintergrund über dem Body liegt, wird auch der gesamte Inhalt transparent, wenn ich für den Body einen Wert für opacity eingebe.
    Will jedoch nur das Bild an sich transparent machen.

    Hallo,


    das geht nicht. opacity wirkt sich immer auf alle Elemente aus, die sich innerhalb des mit opacity versehenen Elements befinden. Beim body sind das dann alle Elemente.


    Du müsstest das Bild bereits transparent abspeichern soweit dies möglich ist, zum Beispiel bei png-Dateien.


    Gruss


    MrMurphy

    Hallo


    Zitat

    Also Bildbearbeitung bei einer PNG Datei wahrscheinlich die einfachste Lösung?


    Wahrscheinlich nicht. Probier mal folgendes aus:


    Code
    html {
   background-image: url(http://www.torange-de.com/photo/33/16/Wald-Taube-1412082924_19.jpg);
}
body {
   background-image: linear-gradient(hsla(360,0%,100%,0.5), hsla(360,0%,100%,0.5));
   /*min-height: 100vh;*/
}


    Das Hintergrundbild wird dem html-Element zugewiesen (da musst du natürlich dein Bild eintragen) und der darüberliegende body bekommt ein weißes Hintergrundbild.


    Das weiße Hintergrundbild des body wird durchscheinend gemacht. Dies geschieht durch die beiden 0.5 (wichtig der Punkt als Komma). Dort können Werte zwischen 1 (undurchsichtig) und 0 (transparent) eingetragen werden. Einfach mal etwas rumspielen.


    Du kannst dort auch zwei unterschiedliche Werte eintragen, zum Beispiel 1 und 0. Dann ist oben das Bild weiß und wird nach unten hin immer transparenter. Da es sich um einen Farbverlauf handelt müssen mindestens zwei Farben angegeben werden.


    Vorteil: Davon ist kein anderes Element betroffen.


    Die min-height, die ich als Kommentar eingetragen habe, ist eventuell erforderlich, wenn der Inhalt nicht die gesamte Seitenhöhe ausfüllt.


    Falls im CSS html und body bereits vorhanden sind kannst du die Angaben wahrscheinlich dort hinzufügen. Vorhandene Hintergrundbilder müssen deaktiviert werden.


    Anstatt hsla kannst du auch rgba-Farben (wichtig jeweils das a am Ende) verwenden. Die Farben mit der # oder die direkten Farbnamen gehen hingegen nicht.


    Farben findest du zum Beispiel unter


    http://www.mediaevent.de/tutorial/farbcodes.html


    Anstatt rgb oder hsl schreibst du einfach rgba oder hsla und die Transparenz hinter einem zusätzlichem Komma vor der schließenden Klammer hinzu. Wenn du für die Transparenz 1 einträgst werden die Farben wie dort angezeigt verwendet.


    Gruss


    MrMurphy

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden