CSS -Hintergründe
Die CSS-Hintergrundeigenschaften werden verwendet, um Hintergrundeffekte für Elemente hinzuzufügen.
In diesen Kapiteln lernen Sie die folgenden CSS-Hintergrundeigenschaften kennen:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(Kurzschrifteigenschaft)
CSS-Hintergrundfarbe
Die background-colorEigenschaft gibt die Hintergrundfarbe eines Elements an.
Beispiel
Die Hintergrundfarbe einer Seite wird wie folgt eingestellt:
body {
background-color: lightblue;
}
Mit CSS wird eine Farbe meistens angegeben durch:
- ein gültiger Farbname - wie "rot"
- ein HEX-Wert - wie "#ff0000"
- ein RGB-Wert - wie "rgb(255,0,0)"
Unter CSS -Farbwerte finden Sie eine vollständige Liste möglicher Farbwerte.
Andere Elemente
Sie können die Hintergrundfarbe für beliebige 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;
}
Opazität / Transparenz
Die opacityEigenschaft gibt die Deckkraft/Transparenz eines Elements an. Er kann einen Wert von 0,0 - 1,0 annehmen. Je niedriger der Wert, desto transparenter:
Deckkraft 1
Deckkraft 0,6
Opazität 0,3
Opazität 0,1
Beispiel
div {
background-color: green;
opacity: 0.3;
}
Hinweis: Wenn Sie die opacityEigenschaft verwenden, um dem Hintergrund eines Elements Transparenz hinzuzufügen, erben alle untergeordneten Elemente dieselbe Transparenz. Dadurch kann der Text in einem vollständig transparenten Element schwer lesbar werden.
Transparenz mit RGBA
Wenn Sie wie in unserem Beispiel oben 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 % Deckkraft
60 % Deckkraft
30 % Deckkraft
10 % Deckkraft
Sie haben in unserem CSS-Farben-Kapitel gelernt , dass Sie RGB als Farbwert verwenden können. Zusätzlich zu RGB können Sie einen RGB-Farbwert mit einem Alphakanal (RGB A ) verwenden – der die Deckkraft einer Farbe angibt.
Ein RGBA-Farbwert wird angegeben mit: rgba(red, green, blue, alpha ). Der Alpha- Parameter ist eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (vollständig undurchsichtig).
Tipp: Mehr über RGBA-Farben erfahren Sie in unserem CSS-Farben-Kapitel .
Beispiel
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}