Heim > Artikel > Web-Frontend > So ändern Sie die Größe des Hintergrundbilds in CSS
So ändern Sie die Größe des Hintergrundbilds in CSS
- 青灯夜游Original
- 2021-11-10 17:05:5130250Durchsuche
In CSS können Sie die Größe des Hintergrundbilds ändern, indem Sie den Attributstil „Hintergrundgröße“ für das Hintergrundbild festlegen. Die Funktion dieses Attributs besteht darin, die Größe des Hintergrundbilds anzugeben. Die Syntax lautet „Hintergrundgröße:“. Breitenwert Höhenwert;".
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
In CSS können Sie die Größe des Hintergrundbilds ändern, indem Sie den Attributstil „Hintergrundgröße“ auf das Hintergrundbild festlegen.
Das Attribut „Hintergrundgröße“ gibt die Größe des Hintergrundbilds an.
Syntax: background-size: length|percentage|cover|contain;
Länge Legt 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, wird der zweite auf „Auto“ gesetzt und
percentage berechnet 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 auf „auto“
cover gesetzt, wodurch das Seitenverhältnis des Bildes beibehalten und das Bild auf die kleinste Größ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">
<style>
div{
width: 400px;
height: 224px;
}
.box1{
background:url(img/2.jpg) no-repeat;
}
.box2{
background:url(img/2.jpg) no-repeat;
background-size: 200px 160px;
}
</style>
</head>
<body>
<p><strong>原始图片大小</strong></p>
<div class="box1"></div>
<p>本身这个图片宽度为400px，高度224px</p>
<br />
<p><strong>通过CSS background-size修改后的背景图片</strong></p>
<div class="box2"></div>
</body>
</html>
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo ändern Sie die Größe des Hintergrundbilds in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!