Hintergrund
英[ˈbækgraʊnd] 美[ˈbækˌɡraʊnd]
n
英[saɪ z]美[ saɪz]
n. Größe, Leim, große Menge, Größe ändern, Farbe auftragen bestimmte Größe Dritte Person Singular: Größen Plural: Größen Partizip Präsens: Größe Vergangenheitsform: Größe Partizip Perfekt: Größe
CSS-Eigenschaft „Hintergrundgröße'. Syntax
Wie verwende ich das Attribut „Hintergrundgröße“?
Das Attribut „Hintergrundgröße“ kann die Größe des Hintergrundbilds festlegen. Syntax: Hintergrundgröße: Länge|Prozentsatz|Abdeckung|Contain; Legen Sie die Bildgröße über den Längenwert oder den Prozentsatz fest oder skalieren Sie das Bild über Cover und Contain.
Funktion: Geben Sie die Größe des Hintergrundbilds an.
Syntax: background-size: length|percentage|cover|contain;
Beschreibung: length Legt 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 und der zweite Wert die Höhe fest. Wenn nur ein Wert eingestellt ist, wird der zweite Wert auf „auto“ gesetzt. cover Erweitert das Hintergrundbild so weit, dass das Hintergrundbild den Hintergrundbereich vollständig abdeckt. Einige Teile des Hintergrundbilds werden möglicherweise nicht im Hintergrundankerbereich angezeigt. include Erweitert das Bild auf seine maximale Größe, sodass seine Breite und Höhe vollständig in den Inhaltsbereich passen.
Hinweis: IE9+, Firefox 4+, Opera, Chrome und Safari 5+ unterstützen das Attribut „Hintergrundgröße“.
CSS-Eigenschaft „Hintergrundgröße'. Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url('http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
background-size:100px 63px;
-moz-background-size:100px 63px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" alt="Flowers"></p>
</body>
</html>Instanz ausführen »
Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen