English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS Hintergrund-Die Größe des Hintergrundbildes, die durch die size-Eigenschaft angegeben wird.
Die folgende Tabelle gibt eine Übersicht über die Anwendungskontexte und Versionshistorie dieser Eigenschaft.
| Standardwert: | auto auto |
|---|---|
| Geeignet für: | alle Elemente |
| Vererbung: | keine |
| Animierbar: | ist.Siehe Animationseigenschaften. |
| Version: | CSS3neue Funktion |
| JavaScript-Syntax: | object object.style.backgroundSize="60px 80px" |
Die Syntax dieses Attributes ist wie folgt:
background-size: length | percentage | auto | cover | contain | initial | inherit
Der folgende Beispiel zeigt, wie background-size-Eigenschaft.
.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px gestrichelt #333;
background: url("images/sky.jpg) keine-repeat;
background-size: contain;
}Testen Sie es heraus‹/›Hinweis:Dieser background-Die size Eigenschaft wird normalerweise verwendet, um vollständige Hintergrundbilder zu erstellen, die entsprechend der Größe des Browserfensters oder der Breite skaliert werden.
Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.
| Wert | Beschreibung |
|---|---|
| length | Setzen Sie die Breite und Höhe des Hintergrundbildes auf angegebene Längen. Der erste Wert setzt die Breite, der zweite Wert die Höhe. Wenn nur ein Wert angegeben wird, wird der zweite Wert auf auto gesetzt. Negative Längenwerte sind nicht erlaubt. |
| percentage | Setzen Sie die Breite und Höhe des Hintergrundbildes auf den Prozentsatz des Hintergrundpositionsbereichs. Der erste Wert setzt die Breite, der zweite Wert die Höhe. Wenn nur ein Wert angegeben wird, wird der zweite Wert auf auto gesetzt. Negative Prozentsatzwerte sind nicht erlaubt. |
| auto | Ein auto für eine Dimension der Breite oder Höhe des Hintergrundbildes, um sicherzustellen, dass das ursprüngliche Verhältnis beibehalten wird. Wenn beide Größen auto angegeben sind, enthält das Hintergrundbild seine eigenen Breite und Höhe, was das Standardverhalten ist. |
| cover | Skalieren Sie das Bild auf die kleinste Größe, um sicherzustellen, dass die Breite und Höhe des Bildes den Hintergrundpositionsbereich vollständig abdecken, während das ursprüngliche Verhältnis der Breite und Höhe (wenn vorhanden) beibehalten wird. |
| contain | Skalieren Sie das Bild, behalten Sie gleichzeitig das ursprüngliche Verhältnis der Breite und Höhe bei (wenn vorhanden), skalieren Sie es auf die größtmögliche Größe, um sicherzustellen, dass die Breite und Höhe des Bildes in den Hintergrundpositionsbereich passen. |
| initial | Setzen Sie diesen Eigenschaftswert auf seinen Standardwert. |
| inherit | Wenn angegeben, wird der verknüpfte Element auf den background des Elternelements angewendet.-Berechneter Wert der size Eigenschaft. |
background-Kompatibilität der size Eigenschaft der Browser, alle gängigen Browser unterstützen diese Eigenschaft.
|
Bitte beziehen Sie sich auf die folgenden Tutorials:CSS Hintergrund,CSS3Hintergrund.
Verwandte Eigenschaften:background,background-attachment,background-color,background-image,background-clip,background-position,background-repeat,background-origin.