CSS -Hintergrund
Die CSS-Hintergrund-Eigenschaften werden verwendet, um Hintergrundeffekte für Elemente hinzuzufügen.
In diesen Kapiteln lernen Sie die folgenden CSS-Hintergrundeigenschaften kennen:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground(shorthand property)
CSS background-color
Die Eigenschaft background-color gibt die Hintergrundfarbe eines Elements an.
Beispiel
Die Hintergrundfarbe einer Seite wird folgendermaßen eingestellt:
body {
background-color: lightblue;
}
Try it Yourself »
Bei CSS wird eine Farbe am häufigsten wie folgt angegeben:
- ein gültiger Farbname - wie "red"
- ein HEX-Wert - wie "#ff0000"
- ein RGB-Wert - wie "rgb(255,0,0)"
Eine vollständige Liste der möglichen Farbwerte finden Sie unter CSS-Farbwerte.
Andere Elemente
Sie können die Hintergrundfarbe für alle HTML-Elemente festlegen:
Beispiel
Hier haben die Elemente <h1>, <p> und <div> unterschiedliche Hintergrundfarben:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Try it Yourself »
Opacity / Transparency (Opazität / Transparenz)
Die Eigenschaft opacity gibt die Opazität/Transparenz eines Elements an. Sie kann Werte zwischen 0,0 und 1,0 annehmen. Je niedriger der Wert, desto transparenter:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Hinweis: Wenn Sie die Eigenschaft opacity verwenden, um dem Hintergrund eines Elements Transparenz zu verleihen, erben alle untergeordneten Elemente dieselbe Transparenz. Dies kann dazu führen, dass der Text in einem vollständig transparenten Element schwer lesbar ist.
Transparenz mit RGBA
Wenn Sie, wie im obigen Beispiel, keine Deckkraft auf untergeordnete Elemente anwenden möchten, verwenden Sie RGBA-Farbwerte. Das folgende Beispiel legt die Deckkraft für die Hintergrundfarbe und nicht für den Text fest:
100% opacity
60% opacity
30% opacity
10% opacity
Sie haben in unserem Kapitel zu CSS-Farben gelernt, dass Sie RGB als Farbwert verwenden können. Zusätzlich zu RGB können Sie einen RGB-Farbwert mit einem Alpha-Kanal (RGBA) verwenden, der die Deckkraft einer Farbe angibt.
Ein RGBA-Farbwert wird mit rgba(rot, grün, blau, alpha) angegeben. Der Parameter alpha ist eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (vollständig undurchsichtig).
Tipp: Mehr zu RGBA-Farben erfahren Sie in unserem Kapitel CSS-Farben.
Beispiel
div {
background: rgba(0, 128, 0, 0.3) /* Grüner Hintergrund mit 30 % Deckkraft */
}
Try it Yourself »
Die CSS-Eigenschaft „Hintergrundfarbe“
| Eigentum | Beschreibung |
|---|---|
| background-color | Legt die Hintergrundfarbe eines Elements fest |
CSS — Hintergrundfarben – W3Schools-Video
Dieses Video ist eine Einführung in Hintergrundfarben in CSS.
Teil einer Reihe von Video-Tutorials zum Erlernen von CSS für Anfänger!
