HTML-Hintergrund wiederholt sich nicht

Wie kann man verhindern, dass sich der HTML-Hintergrund wiederholt?

HTML (Hypertext Markup Language) ist die grundlegendste Sprache in der Webentwicklung. Sie steuert die Struktur und den Inhalt von Webseiten durch Markup-Sprache. Bei der Webentwicklung ist das Hintergrunddesign sehr wichtig, es kann den Benutzern visuelles Vergnügen bereiten und die Website attraktiver machen. Manchmal stellen wir jedoch fest, dass der Hintergrund der Webseite wiederholt wird, was sich sehr nachteilig auf das visuelle Erlebnis auswirkt. Wie kann man also verhindern, dass sich der HTML-Hintergrund wiederholt? Dieser Artikel gibt Ihnen detaillierte Antworten.

1. Verwenden Sie das Attribut „Hintergrundwiederholung“

Wenn die Größe des Hintergrundbilds nicht ausreicht, kommt es häufig zu Wiederholungen. An dieser Stelle können wir steuern, wie sich das Hintergrundbild wiederholt, indem wir das Attribut „background-repeat“ festlegen. Das Attribut „Hintergrundwiederholung“ hat vier Attributwerte:

(1) Wiederholung: Standardwert, das Hintergrundbild wird horizontal und vertikal wiederholt.
(2) Wiederholung-x: Das Hintergrundbild wird nur horizontal und vertikal wiederholt. Die Richtung nicht wiederholen;
(3) Wiederholung-y: Das Hintergrundbild wiederholt sich nur in vertikaler Richtung und wiederholt sich nicht in horizontaler Richtung.
(4) keine Wiederholung: Das Hintergrundbild wiederholt sich überhaupt nicht.

Indem Sie den Wert des Attributs „background-repeat“ auf „no-repeat“ setzen, können Sie verhindern, dass sich der HTML-Hintergrund wiederholt.

html {
background-image:url("background.jpg");
background-repeat:no-repeat;
}

2. Verwenden Sie das Attribut „Hintergrundgröße“

Wenn das Bild zu klein ist, aber wir Ich möchte es nicht Das Hintergrundbild wird gestreckt und verformt. Wenn Sie jedoch möchten, dass es zentriert ist und den gesamten Bildschirm ausfüllt, können wir das Attribut „Hintergrundgröße“ verwenden. Das Attribut „Hintergrundgröße“ hat zwei optionale Werte:

(1) cover: Das Hintergrundbild wird proportional skaliert, um sicherzustellen, dass das Bild den gesamten Container vollständig abdeckt, ein Teil des Bildes jedoch möglicherweise abgeschnitten wird.
(2) enthalten: Skalieren Sie das Hintergrundbild proportional, um sicherzustellen, dass das Bild vollständig im Container angezeigt wird.

html {
background-image:url("background.jpg");
background-size:cover;
background-repeat:no-repeat;
}

3. Verwenden Sie das Attribut „Hintergrundanhang“

Wenn die Wenn das Hintergrundbild groß ist und wir möchten, dass der Benutzer es beim Scrollen der Seite immer sehen kann, können wir das Attribut „background-attachment“ verwenden. Das Attribut „Hintergrundanhang“ hat zwei Werte:

(1) Scrollen: Standardwert, das Hintergrundbild bewegt sich beim Scrollen mit dem Inhalt.
(2) Fest: Das Hintergrundbild bewegt sich beim Scrollen nicht.

html {
background-image:url("background.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
}

Zusammenfassung

Bisher haben wir drei Arten von Methoden eingeführt um dafür zu sorgen, dass sich der HTML-Hintergrund nicht wiederholt. Natürlich können wir auch andere Methoden verwenden, um sich nicht wiederholende Hintergründe zu erzielen. Verwenden Sie beispielsweise die CSS3-Eigenschaft „background-clip“, um das Hintergrundbild in einer Ecke des Containers zu positionieren, sodass es den gesamten Container ohne Duplikate ausfüllt. Kurz gesagt: Unabhängig von der verwendeten Methode können wir unsere Webseiten schöner und professioneller gestalten und den Benutzern ein besseres Erlebnis bieten.

Das obige ist der detaillierte Inhalt vonHTML-Hintergrund wiederholt sich nicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!