So zeigen Sie das Hintergrundbild vollständig in CSS an

In CSS können Sie das Attribut „background-size“ verwenden, um das Hintergrundbild vollständig anzuzeigen. Dieses Attribut wird verwendet, um die Größe des Hintergrundbilds anzugeben. Sie müssen nur das Attribut „background-size:100 %“ hinzufügen. ;"-Stil für das Element. Das Hintergrundbild wird vollständig angezeigt.

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

So zeigen Sie das Hintergrundbild vollständig in CSS an

Bei der Verwendung von div+css zum Erstellen einer Webseite ist es manchmal notwendig, das gesamte Hintergrundbild innerhalb des div anzuzeigen. Wie verwende ich also CSS-Einstellungen? Das folgende Beispiel erklärt, wie div+css die vollständige Anzeige des Hintergrundbilds steuert.

1. Erstellen Sie eine neue HTML-Datei mit dem Namen test.html, um zu erklären, wie div+css die vollständige Anzeige von Hintergrundbildern steuert. Erstellen Sie ein Modul mit div-Tags, um Hintergrundbilder hinzuzufügen. Setzen Sie das Klassenattribut des div-Tags auf mydiv, das hauptsächlich zum Festlegen des CSS-Stils über diese Klasse unten verwendet wird. Schreiben Sie das Tag und der CSS-Stil der Seite wird in das Tag geschrieben.

Legen Sie den CSS-Stil des Div über den Klassennamen mydiv fest, verwenden Sie das Attribut width, um die Breite des Div auf 300 Pixel festzulegen, und verwenden Sie das Attribut height, um die Höhe des Div auf 300 Pixel festzulegen.

2. Stellen Sie im CSS-Tag das Hintergrundbild des div über das Attribut „background-image“ auf das 1.jpg-Bild ein und verwenden Sie „background-size“, um das Breiten- und Höhenverhältnis festzulegen Hintergrundbild auf 100 %, d. h. das gesamte Hintergrundbild wird angezeigt.

Öffnen Sie die Datei test.html im Browser, um den Effekt zu sehen.

Zusammenfassung:

1. Erstellen Sie eine test.html-Datei.

2. Erstellen Sie ein div-Modul in der Datei.

3. Legen Sie im CSS-Tag die Breite, Höhe und das Hintergrundbild des Div fest und setzen Sie dann die Hintergrundbreite und -höhe über das Attribut „Hintergrundgröße“ auf 100 %, um das gesamte Hintergrundbild anzuzeigen.

Hinweis:

Wenn sich das Breitenverhältnis des Div vom Breiten- und Höhenverhältnis des Bildes unterscheidet, wird die Hintergrundbildeinstellung vollständig angezeigt, was zu einer Verformung führt.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo zeigen Sie das Hintergrundbild vollständig in CSS an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!