Wie stelle ich den Bildhintergrund in HTML ein? Einführung in Hintergrundeigenschaften

Im Webdesign müssen wir manchmal Bilder als Hintergründe verwenden, um Webseiten zu verschönern. HTML bietet verschiedene Methoden zum Festlegen des Hintergrunds von Bildern. In diesem Artikel wird erläutert, wie Sie das Hintergrundattribut von CSS zum Festlegen des Hintergrunds von Bildern verwenden.

1. Verwenden Sie das Attribut „Hintergrundbild“, um den Bildhintergrund festzulegen.

Das Attribut „Hintergrundbild“ wird verwendet, um das Hintergrundbild des Elements festzulegen mehr Bilddateien und kann mit anderen Hintergrundeigenschaften verwendet werden.

Die Syntax lautet wie folgt:

background-image: url(path);

Unter anderem gibt url() den Pfad des Bildes an, der ein relativer oder ein absoluter Pfad sein kann. Der folgende Code legt beispielsweise einen Bildhintergrund fest:

body {
  background-image: url(bg.jpg);
}

In diesem Beispiel wird das Bild bg.jpg als Hintergrund der gesamten Seite verwendet. Es ist zu beachten, dass wir diesen CSS-Code in HTML im Style-Tag oder in einer externen CSS-Datei platzieren.

2. Verwenden Sie die Attribute „Hintergrundwiederholung“ und „Hintergrundposition“

Normalerweise müssen wir auch die Wiederholungsmethode und die Position des Bildes festlegen um das Attribut „background-repeat“ und die Eigenschaft „background-position“ zu verwenden.

1. Hintergrundwiederholungsattribut

Das Hintergrundwiederholungsattribut wird verwendet, um die Wiederholungsmethode des Hintergrundbilds festzulegen Werte:

• repeat: Standardwert, das Hintergrundbild wird horizontal und vertikal wiederholt.
• repeat-x: Nur in horizontaler Richtung wiederholen.
• repeat-y: Nur in vertikaler Richtung wiederholen.
• no-repeat: Nicht wiederholt anzeigen.

Stellen Sie beispielsweise im folgenden Code das Hintergrundbild so ein, dass es sich nur horizontal wiederholt:

body {
  background-image: url(bg.jpg);
  background-repeat: repeat-x;
}

2. background-position property#🎜 🎜#

Das Attribut „background-position“ wird verwendet, um die Startposition des Hintergrundbilds festzulegen. Es kann die folgenden Werte annehmen:

top: Das Hintergrundbild ist von oben angezeigt.
• unten: Das Hintergrundbild wird von unten angezeigt.
• center: Das Hintergrundbild wird in der Mitte angezeigt.
• links: Das Hintergrundbild wird von links beginnend angezeigt.
• rechts: Das Hintergrundbild wird von rechts beginnend angezeigt.

Normalerweise können wir die folgende Methode verwenden, um das Hintergrundpositionsattribut festzulegen:

body {
  background-position: x-axis y-axis;
}

Wobei die x-Achse und die y-Achse den Abstand vom darstellen linker und oberer Versatz (der spezifische Wert kann in Pixeln, Prozentsätzen usw. angegeben werden). Wenn nur ein Wert festgelegt ist, ist der Standardwert der horizontale Versatz und der vertikale Versatz ist standardmäßig die zentrierte Ausrichtung.

Zum Beispiel:

body {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
}

Stellen Sie in diesem Beispiel das Hintergrundbild so ein, dass es sich nicht wiederholt, und beginnen Sie mit der Anzeige in der Mitte oben.

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

Das Attribut „Hintergrundgröße“ wird verwendet, um die Größe des Hintergrundbilds festzulegen. Kann folgende Werte annehmen:

auto: Standardwert, das Hintergrundbild wird in Originalgröße angezeigt.
• cover: Skalieren Sie das Hintergrundbild so, dass es den Elementbereich vollständig abdeckt (das Hintergrundbild wird möglicherweise beschnitten).
• enthalten: Machen Sie das Hintergrundbild so klein wie möglich, damit es vollständig in den Elementbereich passt (es kann etwas Leerraum geben).
• Größe angeben: Sie können Pixel, Prozentsätze und andere Einheiten verwenden, um die Größe des Hintergrundbilds festzulegen.

Beispielsweise wird im folgenden Code das Hintergrundbild so klein wie möglich eingestellt, um vollständig in den Elementbereich zu passen:

body {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

Zusammenfassung

#🎜🎜 #Durch die Verwendung des Hintergrundattributs können wir das Hintergrundbild der Webseite einfach festlegen. Durch die vier Attribute „Hintergrundbild“, „Hintergrundwiederholung“, „Hintergrundposition“ und „Hintergrundgröße“ können wir den Pfad, die Wiederholungsmethode, die Startposition und die Größe des Bildes festlegen. Bitte verwenden Sie es flexibel entsprechend Ihren Anforderungen.

Das obige ist der detaillierte Inhalt vonWie stelle ich den Bildhintergrund in HTML ein? Einführung in Hintergrundeigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!