Wie kann man mehrere Hintergrundbilder mit CSS verwenden

CSS3 erlaubt es, mehrere Hintergrundbilder für ein bestimmtes Element hinzuzufügen, indem es einfach eine kommagetrennte Liste verwendet, um so viel wie möglich anzugeben.

Die kommagetrennte Liste von background-position und/oder background-repeat weist die Position bzw. die Wiederholung für die mehreren Hintergrundbilder als solche zu:

div {
background-image:url(image1), url(image2), url(image3);
background-position:center right, right bottom, center top;
background-repeat:no-repeat, repeat-y, repeat-x;
}

Im angegebenen Beispiel wird Bild1 Mitte-rechts platziert und nicht wiederholt, Bild2 wird rechts unten platziert und vertikal wiederholt und Bild3 mitte-oben platziert und horizontal wiederholt.

Geben Sie das Bild mithilfe der Eigenschaft background-image an, dann bestimmen Sie die Position der Bilder mit der Eigenschaft background-position und geben Sie an, ob die Bilder mit der Eigenschaft background-repeat wiederholt werden sollen oder nicht.

Die zweite Möglichkeit fürs Hinzufügen von mehreren Bildern ist die Verwendung der Eigenschaft background:

div {
background:  url("image1")  no-repeat center bottom, url("image2") no-repeat center top , blue;
}

Wenn Sie die Eigenschaft background-color auf mehrere Hintergrundbilder anwenden, wird die Farbe am Ende hinter allen Hintergrundbildern angewendet. Wie Sie im obigen Beispiel sehen, wird die blaue Farbe am Ende platziert.

Lassen Sie uns also sehen, wie man mithilfe von CSS Schritt für Schritt mehrere Hintergrundbilder erstellt!

Wählen Sie drei Bilder aus. Die Größe soll klein sein, damit Sie sehen können, wie die Eigenschaften background-position und background-repeat funktionieren.
Erstellen Sie ein einfaches HTML-Dokument mit einem Element <div>.
Wenden Sie einen Style auf <div> an und vergessen Sie nicht, ihm eine Breite und eine Höhe zu geben.

Also lassen Sie uns das Ergebnis sehen!

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .example {
      width: 100%;
      height: 500px;
      background:  url("http://www.cliparthut.com/clip-arts/26/vista-aero-pack2-transparent-png-icon-download-free-vector-clipart-M3rZlU.png")  no-repeat 10% 110%, url("https://cdn2.iconfinder.com/data/icons/halloween-icon-set/512/moon_bat__.png")  no-repeat 120% 700% , #002054;
      }
    </style>
  </head>
  <body>
    <div class="example"></div>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel ansehen:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      #example{
      margin:0;
      padding:0;
      position: absolute;
      top: 0;
      left:0;
      bottom: 0;
      width: 100%;  
      height: 70%;
      background-image: url("https://userscontent2.emaze.com/images/d56242ef-c20d-4350-9877-321cb4523328/7c5cdc4d9f6bf00f3fb279f51d7d23fc.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/239518/birds2.svg"), url("http://www.transparentpng.com/thumb/clouds/W5czgG-blue-clouds-png-icon.png"), linear-gradient(to bottom,  rgba(255,255,255,0), 40%,rgba(255,255,255,1) 60%);
      background-size: 20%, 20%, 100%, 100%, 50px;
      background-repeat: no-repeat, no-repeat, no-repeat, repeat-x,repeat;
      background-position: 5% 40%, 95% 60%, center bottom;
      }
      }
    </style>
  </head>
  <body>
    <div id="example"></div>
  </body>
</html>

Versuch es selber!