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