Nicht transparentes Bild auf transparentem Hintergrund in HTML einfügen?

2 Antworten

12.02.2017, 14:50

Um den Hintergrund transparent zu machen, habe ich opacity verwendet.



Schon falsch, da sich Opacity auch auf die Kind-Elemente auswirkt bzw. an all untergeordneten Elemente vererbt wird. Wenn der Div-Container keinen Hintergrund haben soll, einfach keinen zuweisen solltest. Wenn es um eine sichtbare Transparenz geht, mit RGBA als Hintergrundfarbe arbeiten kannst. 

selector {
 background-color: rgba(255,255,255,0.5);
}

Den RGB-Wert einfach durch deinen ersetzen und mit Hilfe des Alpha-Kanals (A) die Transparenz festlegen. Der Wert 1 entspricht dabei einer Sichtbarkeit von 100%. Demnach sind es bei 0.5 lediglich 50% Sichtbarkeit. Anstelle von RGBA auch HSLA verwendet werden kann. 

LG medmonk 

Ich möchte einen schwarzen, transparenten Hintergrund haben. Was soll ich denn jetzt am besten nutzen?

Wenn der Hintergrund schwarz mit einer Transparenz sein soll, lediglich dessen RGB-Wert verwenden musst. Über den Alpha-Kanal dann die Transparenz festlegst. 

selector {
 /* black background and 50% opacity */
 background-color: rgba(0,0,0,0.5);
}

LG medmonk
1
12.02.2017, 14:41

Hallo

Und genau opacity ist das Problem, da opacity sich gnadenlos auf alle Kindelemente auswirkt.

Statt dessen kannst du der Hintergrundfarbe (background-color) den Wert transparent zu weisen.

Oder du wählst für die Hintergrundfarbe einen Farbwert mit Transparenz wie rgba oder hsla, falls du doch etwas Farbe wünscht.

Gruss

MrMurphy

Ich möchte einen schwarzen, transparenten Hintergrund haben. Was soll ich denn jetzt am besten nutzen?
0