CSS Hintergrund
CSS-Hintergrund-Eigenschaften werden verwendet, um den Hintergrund von HTML-Elementen zu definieren.
CSS-Eigenschaften definieren Hintergrundeffekte:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Hintergrundfarbe
Die background-color-Eigenschaft definiert die Hintergrundfarbe eines Elements.
Die Hintergrundfarbe einer Seite wird im body-Selektor angewendet:
In CSS werden Farbwerte normalerweise auf die folgenden Arten definiert:
- Hexadezimal - z. B. "#ff0000"
- RGB - z. B.: "rgb(255,0,0)"
- Farbname - wie z. B.: "red"
In den folgenden Beispielen haben die Elemente h1, p und div unterschiedliche Hintergrundfarben:
Beispiel
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Selbst ausprobieren »
Hintergrundbild
Die Eigenschaft background-image beschreibt das Hintergrundbild eines Elements.
Standardmäßig wird das Hintergrundbild wiederholt (gekachelt), um die gesamte Elemententität abzudecken.
Beispiel für die Einstellung des Seitenhintergrundbilds:
Das Folgende ist ein Beispiel für eine schlechte Kombination aus Text und Hintergrundbild. Die Lesbarkeit des Textes ist schlecht:
Hintergrundbild – horizontal oder vertikal kacheln
Standardmäßig wird die Eigenschaft background-image in horizontaler und vertikaler Richtung der Seite gekachelt.
Einige Bilder wirken sehr uneinheitlich, wenn sie sowohl in horizontaler als auch in vertikaler Richtung gekachelt werden, wie unten gezeigt:
Wenn das Bild nur in horizontaler Richtung gekachelt wird (repeat-x), sieht der Seitenhintergrund besser aus:
Beispiel
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Selbst ausprobieren »
Hintergrundbild – Positionierung festlegen und nicht kacheln
Das Hintergrundbild so einstellen, dass es das Layout des Textes nicht beeinflusst
Wenn Sie nicht möchten, dass das Bild gekachelt wird, können Sie die Eigenschaft background-repeat verwenden:
Beispiel
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
Selbst ausprobieren »
In den obigen Beispielen werden das Hintergrundbild und der Text an derselben Position angezeigt. Um das Seitenlayout sinnvoller zu gestalten und das Lesen des Textes nicht zu beeinträchtigen, können wir die Position des Bildes ändern.
Sie können die Eigenschaft background-position verwenden, um die Position des Bildes im Hintergrund zu ändern:
Beispiel
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Selbst ausprobieren »
Hintergrund – Kurzschreibweise
In den obigen Beispielen können wir sehen, dass die Hintergrundfarbe der Seite über viele Attribute gesteuert wird.
Um den Code für diese Eigenschaften zu vereinfachen, können wir sie zu einer einzigen Eigenschaft zusammenfassen.
Die Kurzschreibweise für Hintergrundfarben ist "background":
Bei Verwendung der Kurzschreibweise ist die Reihenfolge der Eigenschaftswerte:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Sie müssen nicht alle oben genannten Eigenschaften verwenden; Sie können sie entsprechend den tatsächlichen Anforderungen der Seite einsetzen.
Dieses Beispiel verwendet zuvor eingeführtes CSS. Sie können sich die entsprechenden Beispiele ansehen:CSS-Beispiele
Weitere Beispiele
So legen Sie ein festes Hintergrundbild fest
Dieses Beispiel zeigt, wie Sie ein festes Hintergrundbild festlegen. Das Bild scrollt nicht mit dem restlichen Seiteninhalt.
CSS-Hintergrundeigenschaften
| Eigenschaft | Beschreibung |
|---|---|
| background | Die Kurzschreibweise wird verwendet, um Hintergrundeigenschaften in einer einzigen Deklaration festzulegen. |
| background-attachment | Ob das Hintergrundbild fixiert ist oder mit dem restlichen Seiteninhalt scrollt. |
| background-color | Legt die Hintergrundfarbe eines Elements fest. |
| background-image | Legt ein Bild als Hintergrund fest. |
| background-position | Legt die Startposition des Hintergrundbilds fest. |
| background-repeat | Legt fest, ob und wie das Hintergrundbild wiederholt wird. |