Heim >Web-Frontend >CSS-Tutorial >So legen Sie die Größe des Hintergrundbilds in CSS fest
So legen Sie die Größe des Hintergrundbilds in CSS fest
- 青灯夜游Original
- 2021-04-21 15:29:4422669Durchsuche
In CSS können Sie das Attribut „Hintergrundgröße“ verwenden, um die Größe des Hintergrundbilds festzulegen. Das Syntaxformat ist „Hintergrundgröße: numerischer Wert mit Längeneinheit | Prozentwert“. |. cover |. enthalten;".
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
In CSS können Sie das Attribut „background-size“ verwenden, um die Größe des Hintergrundbilds festzulegen; es kann als Längenwert oder Prozentsatz angezeigt werden, und Sie können das Bild auch durch „Cover“ und „Contain“ skalieren.
background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */ background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */ background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */ background-size:cover;/* 将背景图片等比缩放填满整个容器 */ background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
Attributwert:
| Wert | Beschreibung |
|---|---|
| Länge |
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 eingestellt ist, wird der zweite Wert auf „auto“ gesetzt. |
| Prozentsatz |
Legt die Breite und Höhe des Hintergrundbilds als Prozentsatz des übergeordneten Elements fest. Der erste Wert legt die Breite fest und der zweite Wert legt die Höhe fest. Wenn nur ein Wert eingestellt ist, wird der zweite Wert auf „auto“ gesetzt. |
| Cover |
Erweitern Sie das Hintergrundbild so, dass es groß genug ist, sodass das Hintergrundbild den Hintergrundbereich vollständig abdeckt. Einige Teile des Hintergrundbilds werden möglicherweise nicht im Hintergrundpositionierungsbereich angezeigt. |
| enthalten | Erweitern Sie das Bild auf seine maximale Größe, sodass seine Breite und Höhe vollständig in den Inhaltsbereich passen. |
Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: url(img/5.jpg);
background-size: 100px 100px;
-moz-background-size: 100px 100px;
/* 老版本的 Firefox */
background-repeat: no-repeat;
padding-top: 80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<br />
<img src="img/5.jpg" alt="Flowers"></p>
</body>
</html>Rendering:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo legen Sie die Größe des Hintergrundbilds in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!