Heim > Artikel > Web-Frontend > So legen Sie die Hintergrundbildgröße in CSS fest
So legen Sie die Hintergrundbildgröße in CSS fest
- 王林Original
- 2021-05-18 15:46:019863Durchsuche
Die Möglichkeit, die Größe des Hintergrundbilds in CSS festzulegen, besteht darin, das Attribut „Hintergrundgröße“ zum Hintergrundbild hinzuzufügen und den Attributwert auf die erforderliche Breite und Höhe festzulegen, z. B. [Hintergrundgröße: 80 Pixel 60 Pixel;] .
Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.
In CSS gibt es ein Attribut „Hintergrundgröße“, mit dem speziell die Größe des Hintergrundbilds angegeben wird.
Syntax:
background-size: length|percentage|cover|contain;
Attributwert:
length Legen Sie die Höhe und Breite des Hintergrundbilds fest. Der erste Wert legt die Breite und der zweite Wert die Höhe fest. Wenn nur ein Wert angegeben wird, wird der zweite auf „Auto“ gesetzt und
percentage berechnet den Prozentsatz des Positionierungsbereichs relativ zum Hintergrund. Der erste Wert legt die Breite und der zweite Wert die Höhe fest. Wenn nur ein Wert angegeben wird, wird der zweite 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.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body
{
background:url(/try/demo_source/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>原始图片: <img src="/try/demo_source/img_flwr.gif" alt="Flowers" width="224" style="max-width:90%"></p>
</body>
</html>Laufendes Ergebnis:
Verwandte Empfehlungen: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo legen Sie die Hintergrundbildgröße in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!