CSS erstellen strukturierte Hintergründe

In CSS können die Benutzer verschiedene Eigenschaften anwenden, um den Hintergrund des Elements zu platzieren. Darüber hinaus ermöglicht CSS seinen Benutzern auch, ein strukturiertes Bild als Hintergrund des Elements hinzuzufügen. Der "HintergrundbildEigenschaft wird verwendet, um ein oder mehrere Bilder als Hintergrundbilder festzulegen. Während die "Hintergrund WiederholungCSS -Eigenschaft macht das Hintergrundbild wieder wiederholt und strukturiert.

In diesem Tutorial veranschaulichen wir die Methode zum Erstellen eines strukturierten Hintergrunds.

So erstellen Sie einen strukturierten Hintergrund, indem Sie das CSS verwenden?

Befolgen Sie die Prozedur, um einen strukturierten Hintergrund mit dem CSS zu erstellen.

Schritt 1: Erstellen Sie einen DIV -Behälter

Erstellen Sie in einem HTML -Dokument eine einfache “"Element mit dem Klassennamen"T-Background”.

Schritt 2: Abschnitt hinzufügen

Dann fügen Sie eine "hinzu""Tag zusammen mit dem"StilAttribut und den Stil als "festlegen"Anzeige: Flex”. Diese Eigenschaft wird verwendet, um das Layout oder die Länge flexibler Elemente oder Elemente festzulegen.

Schritt 3: Machen Sie eine weitere Div

Im Inneren ""Behälter, zwei weitere Elemente zusammen mit" einfügen "Textur-1" Und "Textur-2Klassen jeweils:

Schritt 4: Zugriffsklassenelemente zugreifen

Greifen Sie im CSS -Abschnitt beides zu “div"Behälter mit Klassen"Textur-1" Und "Textur-2”Verwenden Sie den DOT -Selektor. Versuchen Sie dann die genannten CSS -Styling -Eigenschaften:

.Textur-1, .Textur-2
Rand: 50px;
Höhe: 200px;
Breite: 200px;
Hintergrundfarbe: #1ece85;

Hier:

• Wir haben das benutztRandEigenschaft, um den Raum rund um das Element anzugeben.
• Dann ist die "HöheDas Attribut wird verwendet, um dem Element die Höhe zuzuweisen.
• Der "Breite"Eigenschaft wird als" festgelegt "200pxUm die Elementbreite zu definieren.
• “HintergrundfarbeDie CSS -Eigenschaft verteilt die Farbe für den Hintergrund des Elements.

Das resultierende Bild beschreibt die Ausgabe des obigen Code:

Schritt 5: Erstellen Sie den Hintergrund als strukturiert

Wenden Sie nun die folgenden CSS -Eigenschaften an, um den Hintergrund strukturiert zu machen:

.Textur-1
Hintergrundbild: Wiederholung linear Gradient (36deg, RGBA (255, 253, 253, 0).1), RGBA (255.255.255, 0.1) 1px, transparent 0px, transparent 2px);

Verwenden Sie zuerst die “.strukturiert-1Klasse, um auf das erste Element zuzugreifen und die verschiedenen Eigenschaften anzuwenden:

• “HintergrundbildDie Eigenschaft wird zum Festlegen des Bildes auf der Rückseite des Elements verwendet.
• “Wiederholung linear GradientIst eine Funktion, mit der das Hintergrundbild festgelegt wird. Diese CSS -Funktion besteht darin, ein Bild aus wiederholten linearen Gradienten zu bestehen.
• Stellen Sie dann den Winkel als "ein"36DEG”Zur Wiederholung von Gradientengeschwindigkeiten Graden.
• Geben Sie danach die Farbe für die Wiederholungs-Linear-Gradient als “an" an "RGBA (255, 253, 253, 0.1)" Und "RGBA (255.255.255, 0.1) 1px”.
• Zuletzt zum Hintergrundbild Transparenz hinzufügen.

Wenden wir einen Texturhintergrund für den zweiten an “”:

.Textur-2
Hintergrundbild: URL (/Blätter.png);
Hintergrundrepeat: Wiederholen;

Zugang nun auf die zweite “"Verwenden".Textur-2”. Dann wenden Sie die “an“HintergrundbildEigenschaft und setzen Sie das Bild, indem Sie die URL dieses Bildes verwenden. Danach das "Hintergrund WiederholungDas Attribut wird verwendet, um das Bild auf der Rückseite zu wiederholen.

Ausgang

Es kann beobachtet werden, dass wir den strukturierten Hintergrund erfolgreich erstellt haben.

Abschluss

Um die strukturierten Hintergründe zu erstellen, erstellen Sie zunächst eine “”Container. Fügen Sie dann zwei weitere „“ Container auf die gleiche Weise hinzu und weisen Sie ihnen die Klassen zu. Danach greifen Sie mit ihren jeweiligen Klassen auf die Elemente zu und wenden Sie die “anHintergrundbild" Und "Hintergrund Wiederholung" Eigenschaften. Dieser Beitrag hat das Verfahren zum Erstellen strukturierter Hintergründe erläutert.