So fügen Sie dem Bootstrap ein Hintergrundbild hinzu

Es gibt zwei Möglichkeiten für Bootstrap, Bilder zu Webseiten hinzuzufügen:

Eine ist: durch Das -Tag wird direkt in den HTML-Code eingefügt

Das andere ist: Hinzufügen von

über das CSS-Hintergrundattribut Empfohlen: Anleitung Legen Sie den Hintergrund in Bootstrap fest. Bildadaptive Bildschirmgröße

Zentrierungsmethode: horizontal zentrierter Text-align:center and margin:0 auto

Übersicht

Es gibt 5 Haupthintergrundeigenschaften in CSS2:

* Hintergrundfarbe: Geben Sie die Farbe des gefüllten Hintergrunds an.

*Hintergrundbild: Referenzbild als Hintergrund.

* Hintergrundposition: Geben Sie die Position des Hintergrundbilds des Elements an.

*Hintergrundwiederholung: Bestimmen Sie, ob das Hintergrundbild wiederholt werden soll.

*Hintergrundanhang: Legt fest, ob das Hintergrundbild mit der Seite scrollt.

Mehrere Hintergründe

Neues Attribut: Hintergrundclip

Neues Attribut: Hintergrundursprung

Neues Attribut: Hintergrundgröße (Hintergrundgröße)

Neue Eigenschaften: (Hintergrundunterbrechung)

Verbesserungen der Hintergrundfarbe (Hintergrundfarbe)

Verbesserungen der Hintergrundkachel (Hintergrundwiederholung)

Verbesserungen im Hintergrund -attachment

Neues Attribut: background-origin

Dieses Attribut wird in Verbindung mit background-position verwendet. Die Hintergrundposition kann ausgehend vom Rand, der Polsterung oder dem Inhaltsfeld berechnet werden (ähnlich wie beim Hintergrundclip).

* background-origin: border-box;
Beginne mit der Berechnung der Hintergrundposition mit dem Rand als Ursprung.
* background-origin: padding-box;
Beginne mit der Berechnung des Hintergrunds mit der inneren Polsterung als Ursprung. -position
* Hintergrund-Ursprung: Inhaltsfeld;
Beginn der Berechnung der Hintergrundposition aus dem Inhaltsfeld als Ursprung
Für Hintergrund-Clip und Hintergrund-Ursprung

Verwandte Empfehlungen: Bootstrap-Einführungs-Tutorial

Das obige ist der detaillierte Inhalt vonSo fügen Sie dem Bootstrap ein Hintergrundbild hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!