CSS-Hintergrund

CSS-Hintergrundattribute werden verwendet, um den Hintergrundeffekt eines Elements zu definieren.

In diesen Kapiteln werden Sie lernen, wie man folgende CSS-Hintergrundattribute verwendet:

  • Hintergrundfarbe
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

Hintergrundfarbe Die Eigenschaft legt die Hintergrundfarbe des Elements fest.

Beispiel

Die Hintergrundfarbe der Seite ist wie folgt eingestellt:

body {
  Hintergrundfarbe: hellblau;
}

Probieren Sie es selbst aus

Farben werden in der Regel durch folgende Weise in CSS spezifiziert:

  • Gültige Farbnamen - z.B. "rot"
  • Hexadezimalwerte - z.B. "#ff0000"
  • RGB-Werte - z.B. "rgb(255,0,0)"

Bitte überprüfen Sie CSS Farbenwerte，um die vollständige Liste möglicher Farben zu erhalten.

Andere Elemente

Sie können die Hintergrundfarbe für jedes HTML-Element festlegen:

Beispiel

Hier haben die <h1>、<p> und <div>-Elemente verschiedene Hintergrundfarben:

h1 {
  Hintergrundfarbe: grün;
}
div {
  Hintergrundfarbe: hellblau;
}
p {
  Hintergrundfarbe: gelb;
}

Probieren Sie es selbst aus

Undurchsichtigkeit / Transparenz

Die Transparenz-Eigenschaft legt die Undurchsichtigkeit/Transparenz des Elements fest. Der Wertebereich beträgt 0.0 - 1.0. Ein geringerer Wert bedeutet mehr Transparenz:

Transparenz 1
Transparenz 0.6
Transparenz 0.3
Transparenz 0.1

Beispiel

div {
  Hintergrundfarbe: grün;
  Transparenz: 0.3;
}

Probieren Sie es selbst aus

Hinweis:Verwenden Sie Transparenz Wenn Sie die Transparenz für das Element hinzufügen, übernimmt alle nachfolgenden Kinderlemente die gleiche Transparenz. Dies kann die Lesbarkeit des Textes in vollständig transparenten Elementen beeinträchtigen.

Transparenz mit RGBA

Wenn Sie die Transparenz für nachfolgende Elemente nicht anwenden möchten, z.B. im obigen Beispiel, verwenden Sie RGBA Farbwerte. Nachfolgendes Beispiel legt die Hintergrundfarbe fest,而不是文本的不透明度：

100% Transparenz
60% Transparenz
30% Opazität
10% Opazität

Sie haben von unseren CSS-Farben In diesem Kapitel haben Sie gelernt, RGB als Farbwert zu verwenden. Neben RGB können RGB-Farbwerte auch mit alpha Kanäle zusammen verwendet (RGBA) - Der Kanal bestimmt die Transparenz der Farbe.

RGBA-Farbenwerte werden angegeben als: rgba(red, green, blue, alpha)alpha Die Parameter sind Zahlen zwischen 0.0 (vollständig transparent) und 1.0 (vollständig undurchsichtig).

Tipp:Sie finden mehr Informationen über RGBA-Farben in unseren CSS-Farben In diesem Kapitel haben Sie mehr über RGBA-Farben gelernt.

Beispiel

div {
  background: rgba(0, 128, 0, 0.3) /* Grün mit 30% Transparenz */
}

Probieren Sie es selbst aus