Heim > Web-Frontend > CSS-Tutorial > So legen Sie mit CSS ein Vollbild-Hintergrundbild fest

So legen Sie mit CSS ein Vollbild-Hintergrundbild fest

藏色散人
Freigeben: 2022-12-30 11:11:28
Original
12147 Leute haben es durchsucht

So legen Sie ein Vollbild-Hintergrundbild mit CSS fest: Erstellen Sie zunächst eine HTML-Beispieldatei, fügen Sie dann ein Hintergrundsymbol zum Textkörper in CSS hinzu und legen Sie schließlich das Vollbild-Hintergrundbild fest, indem Sie den Hintergrundgrößenstil hinzufügen.

So legen Sie mit CSS ein Vollbild-Hintergrundbild fest

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

Empfohlen: CSS-Video-Tutorial

Wir geben nichts in den HTML-Code ein, es ist nur ein Textkörper und Stile.

So legen Sie mit CSS ein Vollbild-Hintergrundbild fest

Hinzufügen eines Hintergrundsymbols zum Textkörper in CSS.

So legen Sie mit CSS ein Vollbild-Hintergrundbild fest

Wenn das Bild nicht sehr groß ist, nimmt der Hintergrund der Seite nur einen Teil davon ein.

So legen Sie mit CSS ein Vollbild-Hintergrundbild fest

Um die gesamte Seite abzudecken, können wir einfach das Wiederholungsattribut verwenden, was kaum möglich ist.

So legen Sie mit CSS ein Vollbild-Hintergrundbild fest

Diese Art der Pflasterung besteht jedoch darin, mehrere identische Bilder wiederzuverwenden. Sie ist nur akzeptabel, wenn Ihr Hintergrundbild einfarbig oder ähnlich ist.

So legen Sie mit CSS ein Vollbild-Hintergrundbild fest

Eine weitere perfektere Möglichkeit besteht darin, den Hintergrundgrößenstil hinzuzufügen und ihn auf 100 % festzulegen, sodass das Hintergrundbild den gesamten Bereich einnimmt.

So legen Sie mit CSS ein Vollbild-Hintergrundbild fest

Aus Sicht der Wirkung ist das Bild zwar gestreckt, insgesamt aber akzeptabel.

So legen Sie mit CSS ein Vollbild-Hintergrundbild fest

Das obige ist der detaillierte Inhalt vonSo legen Sie mit CSS ein Vollbild-Hintergrundbild fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage