Wie stelle ich den Hintergrund in HTML ein? Eine kurze Analyse verschiedener Methoden-Front-End-Fragen und Antworten-php.cn

Wie stelle ich den Hintergrund in HTML ein? Eine kurze Analyse verschiedener Methoden

PHPz

Freigeben： 2023-04-21 11:33:56

Original

4622 Leute haben es durchsucht

Im Webdesign ist das Festlegen des Hintergrunds eine sehr grundlegende Fähigkeit. In HTML können wir den Hintergrund der Seite auf verschiedene Arten festlegen, einschließlich einfarbigem Hintergrund, Bildhintergrund, sich wiederholendem Hintergrund, gekacheltem Hintergrund, Hintergrund mit Farbverlauf usw. Im Folgenden werde ich vorstellen, wie Sie mit diesen Methoden den Hintergrund von HTML-Seiten festlegen.

Einfarbiger Hintergrund

Einfarbiger Hintergrund ist der einfachste Hintergrundtyp. Sie müssen nur das Hintergrundfarbattribut von HTML festlegen. Zum Beispiel:

<body style="background-color: #f2f2f2;">

Nach dem Login kopieren

wobei #f2f2f2 ein hexadezimaler Farbcode ist, der Hellgrau darstellt. Weitere Farbcodes finden Sie hier: https://htmlcolorcodes.com/.

Bildhintergrund

In HTML können wir Bilder als Hintergrund der Seite verwenden. Sie können das img-Tag direkt verwenden, um dies zu erreichen. Dies kann sich jedoch auf die Ladegeschwindigkeit der Seite auswirken. Daher wird empfohlen, CSS zum Festlegen des Hintergrundbilds zu verwenden. Zum Beispiel:

<body style="background-image: url(&#39;image.jpg&#39;);">

Nach dem Login kopieren

wobei image.jpg das Bild ist, das Sie als Hintergrund festlegen möchten. Beachten Sie, dass das Bild im selben Verzeichnis wie die HTML-Datei abgelegt werden muss. Sie können relative oder absolute Pfade verwenden, um Bildpositionen anzugeben. Sie können auch andere Attribute hinzufügen, wie zum Beispiel den folgenden Code, um die Position des Bildes so festzulegen, dass es zentriert und nicht wiederholt wird:

<body style="background: url(&#39;image.jpg&#39;) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;">

Nach dem Login kopieren

Das Cover-Attribut hier passt die Bildgröße automatisch an die Seitengröße an. Wenn Sie nicht möchten, dass das Bild gestreckt und verformt wird, können Sie „Contain“ anstelle von „Cover“ verwenden.

Hintergrund wiederholen

Durch das Festlegen eines sich wiederholenden Hintergrunds kann ein kleines Bild fortlaufend gekachelt werden, sodass es die gesamte Seite ausfüllt, wodurch die Bildgröße verringert und die Seitengeschwindigkeit verbessert wird. Verwenden Sie in CSS „repeat“ oder „repeat-x“ oder „repeat-y“, um festzulegen, wie das Bild wiederholt wird. Zum Beispiel:

<body style="background-image: url(&#39;image.jpg&#39;); background-repeat: repeat-y;">

Nach dem Login kopieren

Kachelhintergrund

Durch die Verwendung eines Kachelhintergrunds kann ein Bild oder eine Farbe gekachelt werden, bis es den gesamten Seitenhintergrund ausfüllt. Verwenden Sie in CSS die Eigenschaften „background-size“ und „background-position“, um die Position und Größe von Bildern oder Farben zu steuern. Zum Beispiel:

<body style="background-image: url(&#39;image.jpg&#39;); 
    background-position: center top; 
    background-size: auto 100%;
    background-repeat: no-repeat;">

Nach dem Login kopieren

auto und 100 % bedeuten hier die automatische Anpassung der Breite, während die Höhe 100 % beträgt.

Hintergrund mit Farbverlauf

Verwenden Sie einen Hintergrund mit Farbverlauf, damit Ihre Seite stilvoller aussieht. In CSS können Sie linear-gradient oder radial-gradient verwenden, um flache oder radiale Verläufe zu erstellen. Beispiel:

<body style="background: linear-gradient(to right, #f2f2f2, #ffffff);">

Nach dem Login kopieren

Nach rechts wird hier verwendet, um anzugeben, dass die Verlaufsrichtung von links nach rechts verläuft, #f2f2f2 und #ffffff sind die Farbwerte der Start- und Endpunkte.

Zusammenfassung

Es gibt viele Möglichkeiten, den Hintergrund einer HTML-Seite festzulegen, einschließlich einfarbigem Hintergrund, Bildhintergrund, sich wiederholendem Hintergrund, gekacheltem Hintergrund und Verlaufshintergrund. Mit diesen Methoden können Sie Ihrer Website verschiedene Stile und Funktionen hinzufügen.

Das obige ist der detaillierte Inhalt vonWie stelle ich den Hintergrund in HTML ein? Eine kurze Analyse verschiedener Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!