Zickzack-Hintergrundmuster mit CSS erstellen

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35258{{"Zickzack-Hintergrundmuster"}} css/colors -.-> lab-35258{{"Zickzack-Hintergrundmuster"}} css/width_and_height -.-> lab-35258{{"Zickzack-Hintergrundmuster"}} css/positioning -.-> lab-35258{{"Zickzack-Hintergrundmuster"}} css/backgrounds -.-> lab-35258{{"Zickzack-Hintergrundmuster"}} end

Zickzack-Hintergrundmuster

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

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

Legen Sie einen weißen Hintergrund mit background-color fest.
Erstellen Sie die Teile eines Zickzack-Musters mit background-image und vier linear-gradient()-Werten.
Geben Sie die Größe des Musters mit background-size an.
Stellen Sie die Teile des Musters an den richtigen Orten mit background-position ein.
Um das Muster zu wiederholen, verwenden Sie background-repeat.
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.