Heim > Artikel > Web-Frontend > So ändern Sie die Größe des Hintergrundbilds mit CSS
So ändern Sie die Größe des Hintergrundbilds mit CSS
- 青灯夜游Original
- 2021-10-12 18:13:2826912Durchsuche
In CSS können Sie das Attribut „Hintergrundgröße“ verwenden, um die Größe des Hintergrundbilds zu ändern. Die Funktion dieses Attributs besteht darin, die Größe des Hintergrundbilds anzugeben, indem Sie den Attributwert auf a setzen Geben Sie einen Längenwert oder einen Prozentsatz an oder legen Sie den Attributwert fest. Verwenden Sie die Schlüsselwörter „Cover“ und „Contain“, um das Bild zu skalieren.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Wenn Sie in CSS die Größe des Hintergrundbilds ändern möchten, können Sie das Attribut „Hintergrundgröße“ festlegen.
Das Attribut „Hintergrundgröße“ kann die Größe des Hintergrundbilds angeben. Syntaxformat:
background-size: length|percentage|cover|contain;
length 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, 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.
Das Attribut „Hintergrundgröße“ kann die Bildgröße durch Längenwert oder Prozentsatz festlegen oder das Bild durch „Cover“ und „Contain“ skalieren.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
width: 400px;
height: 230px;
}
.box1{
background:url(img/3.jpg) no-repeat;
}
.box2{
background:url(img/3.jpg) no-repeat;
background-size: 200px 112px;
}
</style>
</head>
<body>
<p><strong>原始背景图片大小</strong></p>
<div class="box1"></div>
<p>本身这个图片宽度为400px，高度225px</p>
<br />
<p><strong>通过CSS修改背景图片大小，图片宽度为200px，高度112px</strong></p>
<div class="box2"></div>
</body>
</html>Rendering:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo ändern Sie die Größe des Hintergrundbilds mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!