Heim  >  Artikel  >  Web-Frontend  >  So verkleinern Sie das Hintergrundbild in CSS

So verkleinern Sie das Hintergrundbild in CSS

青灯夜游
青灯夜游Original
2021-09-10 18:06:206569Durchsuche

In CSS können Sie das Attribut „Hintergrundgröße“ verwenden, um die Größe des Hintergrundbilds zu steuern. Sie müssen nur den Stil „Hintergrundgröße: Breitenwert“ hinzufügen das Hintergrundelement.

So verkleinern Sie das Hintergrundbild in CSS

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

In CSS können Sie das Attribut „background-size“ verwenden, um das Hintergrundbild zu verkleinern.

Das Attribut „Hintergrundgröße“ wird verwendet, um die Größe des Hintergrundbilds anzugeben. Das Syntaxformat ist wie folgt:

background-size: length|percentage|cover|contain;
Wert Beschreibung
Länge Legen Sie die Höhe und Breite des Hintergrundbilds fest. Der erste Wert legt die Breite fest und der zweite Wert legt die Höhe fest. Wenn nur ein Wert angegeben wird und der zweite auf auto(automatisch) eingestellt ist, berechnet
percentage den Prozentsatz des Positionierungsbereichs relativ zum Hintergrund. Der erste Wert legt die Breite fest und der zweite Wert legt die Höhe fest. Wenn nur ein Wert angegeben wird, wird der zweite Wert auf „Auto“
cover gesetzt, wodurch das Seitenverhältnis des Bildes beibehalten und das Bild auf die Mindestgröße skaliert wird, die den Hintergrundpositionierungsbereich vollständig abdeckt.
enthalten Dadurch wird das Seitenverhältnis des Bildes beibehalten und das Bild auf die maximale Größe skaliert, die in den Hintergrundpositionierungsbereich passt. 🔜

Empfohlenes Tutorial: „

CSS-Video-Tutorial

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

Stellungnahme:
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