CSS Grundlagen: Mehrere Hintergründe verwenden

Mit CSS können Sie den Hintergrund von Elementen steuern. Sie können eine background-color festlegen, um ihn mit einer Volltonfarbe zu füllen, eine background-image, um ihn (Sie haben es erraten) mit einem Bild zu füllen, oder sogar beides

body {
  background-color: red;
  background-image: url(pattern.png);
}

Hier ist ein Beispiel, bei dem ich eine SVG-Bilddatei als Hintergrund verwende, eingebettet als Data-URL direkt in CSS.

Siehe den Pen Hintergrundfarbe und Bild zusammen von Chris Coyier (@chriscoyier) auf CodePen.

Das ist nur ein einzelnes Bild, das wiederholt wird, aber wir können tatsächlich mehrere Hintergrundbilder festlegen, wenn wir wollen. Das machen wir, indem wir die Werte mit Kommas trennen.

body {
  background-image: 
    url(image-one.jpg),
    url(image-two.jpg);
}

Wenn wir es so belassen, wird image-one.jpg image-two.jpg wiederholen und vollständig abdecken. Aber wir können sie auch einzeln steuern, mit anderen Hintergrund-Eigenschaften.

body {
  background-image: 
    url(image-one.jpg),
    url(image-two.jpg);
  background-position:
    top right, /* this positions the first image */
    bottom left; /* this positions the second image */
  background-repeat:
    no-repeat; /* this applies to both images */
}

Sehen Sie, wie background-position *auch* durch Kommas getrennte Werte hat? Diese werden individuell auf jedes Bild angewendet. Und wie background-repeat nur einen Wert hat? Wir hätten auch zwei Werte auf die gleiche Weise verwenden können, aber indem wir nur einen Wert verwenden, wird er auf beide angewendet.

Hier ist ein Beispiel mit vier separaten Bildern, eines in jeder Ecke, leicht versetzt

Siehe den Pen Beispiel für mehrere Hintergründe von Chris Coyier (@chriscoyier) auf CodePen.

Schade, dass man Hintergrundbilder nicht drehen oder spiegeln kann, sonst hätten wir nur eines verwenden können. Wir können jedoch ganze Elemente (oder Pseudo-Elemente) drehen und spiegeln, so dass wir in solchen Fällen mit einem einzigen Bild auskommen können!

Siehe den Pen Bild spiegeln, damit Sie nur eines verwenden können von Chris Coyier (@chriscoyier) auf CodePen.

Nur ein paar weitere Dinge, die man hier beachten sollte

1. Die Stapelreihenfolge mehrerer Hintergründe ist „erstes ist oben“.
2. Verläufe werden über background-image angewendet, sodass sie Teil von all dem sein können. Zum Beispiel könnten Sie einen transparenten Verlauf über einem Rasterbild festlegen.

Siehe den Pen Getöntes Bild mit mehreren Hintergründen von Chris Coyier (@chriscoyier) auf CodePen.