Hintergrundbild CSS strecken?
Dieses Tutorial zeigt, wie man Hintergrundbilder mit CSS streckt.
Wie man das Hintergrundbild mit CSS streckt?
Probieren Sie die angegebenen Anweisungen aus, um das Hintergrundbild mit CSS zu dehnen.
Schritt 1: Erstellen Sie den ersten Div -Container
Zuerst fügen Sie eine "hinzu"divContainer durch Verwendung der “"Tag und zuweisen Sie es" ein "Ausweis”Attribut im Container.
Schritt 2: Überschrift hinzufügen
Fügen Sie eine Überschrift hinzu, indem Sie das verwenden "”Tag im HTML -Dokument. Der "
Das Tag wird verwendet, um die Stufe 1 -Überschrift einzubetten.
Schritt 3: Machen Sie den zweiten Div -Behälter
Als nächstes erstellen Sie eine andere “"Container zusammen mit dem"Klasse”Attribut, fügen Sie ein Überschriften -Tag hinzu"”Und einbetten die Überschrift ein. Fügen Sie danach ein weiteres "" hinzu, indem Sie demselben Verfahren folgen:
Hintergrundgröße: Cover:
Hintergrundgröße: 100% Auto:
Schritt 4: Style First Container Class
Greifen Sie hier auf das „“ -Element mit der Klasse zu “zu"IMG-1" mit der Hilfe von ".Selektor und wenden Sie die folgenden Eigenschaften von CSS an:
Grenze: 3px fester RGB (240, 12, 12);
Breite: 500px;
Höhe: 200px;
Hintergrund: URL (Emoji.png);
Hintergrundgröße: Cover;
Hier:
- Der "GrenzeEigenschaft legt eine Grenze um das Element um.
- “BreiteDefiniert die Größe des Elements horizontal.
- “HöheGibt die Elementgröße vertikal an.
- “Hintergrund”Wird verwendet, um die Hintergrundfarbe des Elements zuzuweisen.
- “HintergrundgrößeEigentum mit dem "AbdeckungDer Wert wird als Hintergrundgröße verwendet, das das Bild skaliert, um den Container zu füllen:
Schritt 5: Style Second Container Class
Greifen Sie auf den zweiten Div -Container zu, indem Sie den Klassennamen verwenden “.IMG-2”Und wenden Sie die angegebenen Eigenschaften an:
Grenze: 3px Solid RGB (226, 17, 17);
Breite: 500px;/ * Bildschirmbreite */
Höhe: 200px;/ * Bildschirmhöhe */
Hintergrund: URL (Emoji.png);
Hintergrundrepeat: No-Repeat;
Hintergrundgröße: 100% Auto;
Im obigen Code-Block:
- Der "Hintergrund WiederholungDie Eigenschaft wird verwendet, um das Bild entlang der horizontalen und vertikalen Achsen zu wiederholen. Hier wird der Wert als "festgelegt" festgelegt "No-Repeat”, Um das Bild nicht zu wiederholen.
- Dann ist die "Hintergrundgröße”Wird als" eingestellt "100% Auto”.
Ausgang
Es ist zu bemerken, dass wir das Hintergrundbild mit CSS erfolgreich gestreckt haben.
Abschluss
Verwenden Sie zuerst das Hintergrundbild, um zuerst das “zu verwendenHintergrundEigenschaft, um das Hintergrundbild für ein Element zusammen mit dem Wert als "festzulegen" festlegenURL”. Verwenden Sie dann die CSS -Eigenschaft “Hintergrundgröße" als "Abdeckung" oder "100% Auto”Um das Bild zu strecken. Dieser Beitrag hat Ihnen beigebracht.