LabEx
LoginBeitreten

Zickzack-Hintergrundmuster

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir lernen, wie man mithilfe von CSS ein Zickzack-Hintergrundmuster erstellt. Indem wir linear-gradient() verwenden und die background-size und background-position anpassen, werden wir in der Lage sein, ein visuell ansprechendes Muster zu erstellen, das auf verschiedene Elemente einer Website eingesetzt werden kann. Dieses Lab wird unsere CSS-Fähigkeiten verbessern und uns ein besseres Verständnis dafür vermitteln, wie man CSS verwendet, um einzigartige Designs zu erstellen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 94% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Zickzack-Hintergrundmuster

index.html und style.css wurden bereits in der VM bereitgestellt.

Um ein Zickzack-Hintergrundmuster zu erstellen, folgen Sie diesen Schritten:

  1. Legen Sie einen weißen Hintergrund mit background-color fest.
  2. Erstellen Sie die Teile eines Zickzack-Musters mit background-image und vier linear-gradient()-Werten.
  3. Geben Sie die Größe des Musters mit background-size an.
  4. Stellen Sie die Teile des Musters an den richtigen Orten mit background-position ein.
  5. Um das Muster zu wiederholen, verwenden Sie background-repeat.
  6. Hinweis: Die height und width des Elements sind nur zu Demonstrationszwecken festgelegt.

Hier ist ein Beispielcodeausschnitt:

<div class="zig-zag"></div>

.zig-zag {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image:
    linear-gradient(135deg, #000 25%, transparent 25%),
    linear-gradient(225deg, #000 25%, transparent 25%),
    linear-gradient(315deg, #000 25%, transparent 25%),
    linear-gradient(45deg, #000 25%, transparent 25%);
  background-position:
    -30px 0,
    -30px 0,
    0 0,
    0 0;
  background-size: 60px 60px;
  background-repeat: repeat;
}

Klicken Sie bitte in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Zickzack-Hintergrundmuster" abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.