Anzeige
Anzeige
Für Links auf dieser Seite erhält GIGA ggf. eine Provision vom Händler, z.B. für mit oder blauer Unterstreichung gekennzeichnete. Mehr Infos.
  1. GIGA
  2. Tech
  3. Digital Life
  4. Transparenten Background mit CSS erstellen – so geht's

Transparenten Background mit CSS erstellen – so geht's

© Minerva Studio / GettyImages

Mit CSS-Dateien bestimmt ihr das Design eurer HTML-Dokumente. Wie ihr mit CSS einen transparenten Hintergrund erstellt, erklären wir hier auf GIGA.

CSS steht für „Cascading Style Sheets“ und dient als Ergänzungssprache zu HTML. Die CSS-Dateien trennen Inhalt und Design einer HTML-Webseite voneinander und ermöglichen die einheitliche Anpassung von Layout, Typografie oder Aufbau. Wie ihr den Hintergrund eurer HTML-Seiten mit CSS transparent einstellt, zeigen wir in diesem Artikel. 

Warum das Internet ganz eigene Verhaltensmuster hervorruft, erklären wir im Video

Anzeige
Interview mit Prof. Dr. Clemens Schwender zum Verhalten im Internet
Interview mit Prof. Dr. Clemens Schwender zum Verhalten im Internet

Hintergrund mit CCS gestalten – so geht's

Der Hintergrund ist all das, was ihr hinter eingefügten Inhalten auf eurer HTML-Webseite seht. Anpassungen am Hintergrund werden mit der background-Eigenschaft vorgenommen. Einen transparenten Hintergrund definiert ihr mit dem Befehl „background-color“ und dem Farbwert „transparent“. In der praktischen Anwendung könnte der Befehl folgendermaßen aussehen: 

Anzeige

HTML-Code 
< div class="beispiel" >
Das ist der Test-Schriftzug. 
< /div >

CSS-Datei
.beispiel{
  background-color: transparent;
  color: white;
}

Für die korrekte Darstellung wurden zusätzlich Leerzeichen zwischen den Tags eingefügt. 

HTML und CSS: Das umfassende Handbuch
HTML und CSS: Das umfassende Handbuch
Preis kann jetzt höher sein. Preis vom 29.03.2024 08:03 Uhr

Farbigen Hintergrund mit CSS erstellen – mit RGBA

Möchtet ihr den Hintergrund alternativ in einer durchscheinenden Farbe definieren, könnt ihr die Eigenschaft „background-color: rgba“ mit einem Opacity-Faktor verbinden: 

Anzeige

.beispiel {
  background: rgba(255, 255, 255, 0.5);
}

Hier bestimmt ihr zunächst den Farbwert über rot, grün und blau und legt mit einem Faktor zwischen Null und Eins die Transparenz auf dem Alpha-Kanal fest (0.0 komplett transparent und 1.0 komplett undurchsichtig).  

Wie ihr stattdessen ein Bild als Hintergrund einfügt, haben wir euch bereits in diesem Artikel erklärt. Eine ausführliche Auflistung der wichtigsten Farbcodes haben wir in diesem Ratgeber

Was man sonst so alles mit Schriftzeichen anstellen kann, seht ihr in diesem Quiz. Könnt ihr die Spiele, die hier mit ASCII-Zeichen abgebildet werden, erkennen?

Erkennst du diese Spiele anhand ihrer Code-Bilder?

Hat dir der Beitrag gefallen? Folge uns auf WhatsApp und Google News und verpasse keine Neuigkeit rund um Technik, Games und Entertainment.

Anzeige