CSS: Transparenter Hintergrund einfügen: So gehts!

Wenn du in HTML einen Transparenten Hintergrund haben möchtest dann musst du das mit CSS löschen. Dafür gibt es aber eine schöne Lösung. Der Befehl in CSS dafür heißt nämnlich opacity.

Mit diesem Befehl kannst du Hintergründe aber auch Texte transparent machen. Wie das geht zeige ich dir.

Transparenter Hintergund mit CSS

.myclass {
background: #42f598;
opacity:0.5;
}

Ergebnis

Zur Erklärung

Opacity:1 Element wäre ohne Transparenz
Opacity:0.5 bedeutet das die Transparent 50% ist
Opacity:0.2 bedeutet das die Transparent 80% ist
Opacity:0.1 bedeutet das die Transparent 90% ist
Opacity:0: Element wäre nicht sichtbar

Transparenter Hintergrund mit rgba

Eine weitere Möglichkeit ist es einen Transparenten Hintergrund mit dem CSS Befehl rgba zu erstellen. Dies steht für Red Green Blue Alpha.

Dazu musst du einfach nur den rgba Code einer Farbe nehmen und dahinter wird dann noch der Alpha Kanal gesetzt. Dieser gibt die Transparenz an.

.beispiel0 { background-color: rgba(255, 255, 255, 0); }
.beispiel2 { background-color: rgba(255, 255, 255, 0.2); }
.beispiel4 { background-color: rgba(255, 255, 255, 0.4); }
.beispiel6 { background-color: rgba(255, 255, 255, 0.6); }
.beispiel8 { background-color: rgba(255, 255, 255, 0.8); }
.beispiel10 { background-color: rgba(255, 255, 255, 1); }

Zur Erklärung

0 bedeutet 100% Transparenz
0.2 bedeutet 80% Transparenz
0.4 bedeutet 60% Transparenz
0.6 bedeutet 40% Transparenz
0.8 bedeutet 20% Transparenz
1 bedeutet keine Transparenz

Hat dir der Beitrag gefallen?

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

Das könnte dich interessieren!

Weitere Kategorien