CSS-Mehrfachhintergrund

In diesem Kapitel werden Sie lernen, wie Sie mehrere Hintergrundbilder zu einem Element hinzufügen.

Sie werden auch die folgenden Attribute lernen:

  • background-size
  • background-origin
  • background-clip

CSS-Mehrfachhintergrund

CSS ermöglicht es Ihnen, durch background-image Das Attribut fügt einem Element mehrere Hintergrundbilder hinzu.

Verschiedene Hintergrundbilder werden durch Kommas getrennt und stapeln sich übereinander, wobei das erste Bild dem Betrachter am nächsten ist.

Der folgende Beispiel hat zwei Hintergrundbilder. Das erste Bild ist eine Blume (ausgerichtet nach unten und rechts), das zweite Bild ist ein Papierhintergrund (ausgerichtet nach links oben):

Beispiel

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Selbst ausprobieren

Mehrfache Hintergrundbilder können mit einem separaten Hintergrundattribut (wie oben beschrieben) oder background Kurzschreibattribut, um dies zu spezifizieren.

Der folgende Beispiel verwendet background Kurzschreibattribut (Ergebnis wie im obigen Beispiel):

Beispiel

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Selbst ausprobieren

CSS Hintergrundgröße

CSS background-size Das Attribut ermöglicht es Ihnen, die Größe des Hintergrundbilds zu spezifizieren.

Die Größe des Hintergrundbilds kann durch Länge, Prozentsatz oder durch eine der folgenden beiden Schlüsselwörter angegeben werden:contain oder cover.

Der folgende Beispiel stellt die Größe des Hintergrundbilds auf viel kleiner als das Original ein (in Pixeln):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Dies ist der Code:

Beispiel

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Selbst ausprobieren

background-size Die anderen beiden möglichen Werte sind contain und cover.

contain Schlüsselwörter skalieren das Hintergrundbild auf so groß wie möglich (aber müssen die Breite und Höhe des Inhaltsbereichs anpassen). Dies kann bedeuten, dass es einige Bereiche gibt, die vom Hintergrundbild nicht abgedeckt werden, abhängig von der Verhältnis des Hintergrundbilds und des Hintergrundpositionierungsbereichs.

cover Schlüsselwörter skalieren das Hintergrundbild, um sicherzustellen, dass das Inhaltsbereich vollständig vom Hintergrundbild abgedeckt wird (seine Breite und Höhe sind gleich oder größer als der Inhaltsbereich). Dies kann bedeuten, dass einige Teile des Hintergrundbildes im Hintergrundpositionierungsbereich unsichtbar sind.

Der folgende Beispiel zeigt: contain und cover Verwendung:

Beispiel

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Selbst ausprobieren

Größe mehrerer Hintergrundbilder definieren

Bei der Verarbeitung mehrerer Hintergründe:background-size Das Attribut kann auch mehrere Werte für die Hintergrundgröße akzeptieren (eine Liste durch Kommas getrennt).

Der folgende Beispiel definiert drei Hintergrundbilder, jedes mit einem verschiedenen background-size-Wert:

Beispiel

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Selbst ausprobieren

Vollbild-Hintergrundbild

Jetzt möchten wir, dass das Hintergrundbild auf der Website immer die gesamte Browserfenstergröße abdeckt.

Konkret wie folgt:

  • Füllt die gesamte Seite mit dem Bild (keine Lücken)
  • Skaliert das Bild nach Bedarf
  • Zentriert das Bild auf der Seite
  • Verursacht keine Scrollleiste

Der folgende Beispiel zeigt, wie man dies umsetzt: Verwenden Sie das <html>-Element (<html>-Element ist immer mindestens so hoch wie das Browserfenster). Stellen Sie dann einen festen und zentrierten Hintergrund darauf ein. Schließlich passen Sie die Größe mit dem background-size-Attribut an:

Beispiel

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Selbst ausprobieren

Hero Image

Sie können auch verschiedene Hintergrundeigenschaften auf <div> verwenden, um ein Hero Image (großes Bild mit Text) zu erstellen und es an der gewünschten Position zu platzieren.

Beispiel

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

Selbst ausprobieren

CSS background-origin Eigenschaft

CSS background-origin Diese Eigenschaft bestimmt die Position des Hintergrundbildes.

Diese Eigenschaft akzeptiert drei verschiedene Werte:

  • border-box - Das Hintergrundbild beginnt im linken oberen Ecke der Grenze
  • padding-box - Das Hintergrundbild beginnt im linken oberen Ecke des Innenabstands (Standard)
  • content-box - Das Hintergrundbild beginnt im linken oberen Ecke des Inhalts

Der folgende Beispiel zeigt: background-origin Eigenschaften:

Beispiel

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Selbst ausprobieren

CSS background-clip Eigenschaft

CSS background-clip Diese Eigenschaft bestimmt den Bereich, in dem der Hintergrund gezeichnet wird.

Diese Eigenschaft akzeptiert drei verschiedene Werte:

  • border-box - Zeichnet den Hintergrund bis zur äußeren Kante der Grenze (Standard)
  • padding-box - Zeichnet den Hintergrund bis zur äußeren Kante des Innenabstands
  • content-box - Zeichnet den Hintergrund im Inhaltselfeld

Der folgende Beispiel zeigt: background-clip Eigenschaften:

Beispiel

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Selbst ausprobieren

CSS fortgeschrittene Hintergrundeigenschaften

Eigenschaft Beschreibung
background Kurzschreibweise, um alle Hintergrundeigenschaften in einer Anweisung zu setzen.
background-clip Den Zeichnungsbereich des Hintergrunds festlegen.
background-image Ein oder mehrere Hintergrundbilder für ein Element angeben.
background-origin Den Positionierungsplatz des Hintergrundbildes festlegen.
background-size Die Größe der Hintergrundbilder festlegen.