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:
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:
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.
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:
.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?
