So stellen Sie das Hintergrundbild so ein, dass es in HTML/CSS zentriert wird

In HTML/CSS können Sie das Hintergrundbild so einstellen, dass es zentriert wird. Sie müssen nur den Stil „background-position: center;“ zu dem Element hinzufügen, in dem das Hintergrundbild festgelegt ist Sie können das Hintergrundbild in horizontaler und vertikaler Richtung zentriert anzeigen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

HTML/CSS-Schritte zum Festlegen des zentrierten Hintergrundbilds

Öffnen Sie das Front-End-Entwicklungstool, erstellen Sie eine neue HTML-Codepage

Erstellen Sie ein div-Tag zum Festlegen der Hintergrundfarbe auf Fügen Sie die HTML-Codeseite hinzu und fügen Sie dann diesem Tag „Add class = „bg-img““ hinzu

, um das Hintergrundbild festzulegen. Erstellen Sie ein Stil-Tag und legen Sie dann im Tag das Hintergrundbild, das sich nicht wiederholende Bild, die Breite und die Höhe für die Klasse bg-img fest. Stilcode:

.bg-img{
height: 100vh;
width: 100%;
background-image: url(img/car.jpg);
background-repeat: no-repeat;
}

Speichern Sie den HTML-Code und öffnen Sie ihn mit einem Browser. Zu diesem Zeitpunkt werden Sie feststellen, dass das Hintergrundbild im Browser in der oberen linken Ecke angezeigt wird.

Gehen Sie zurück zur HTML-Codeseite und fügen Sie den background-position: center-Stil zur bg-img-Klasse hinzu.

Speichern Sie den HTML-Code und aktualisieren Sie den Browser. Zu diesem Zeitpunkt werden Sie feststellen, dass das Hintergrundbild im Browser automatisch zentriert wurde.

Empfohlene Tutorials: „HTML-Video-Tutorial“, „CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonSo stellen Sie das Hintergrundbild so ein, dass es in HTML/CSS zentriert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!