Die background-sizeEigenschaft in CSS ist eine der nützlichsten und komplexesten Hintergrundeigenschaften. Es gibt viele Variationen und unterschiedliche Syntaxen, die Sie für diese Eigenschaft verwenden können. Alle haben unterschiedliche Anwendungsfälle. Hier ist ein einfaches Beispiel:
html ( background: url(greatimage.jpg.webp); background-size: 300px 100px; )Dies ist ein Beispiel für die Zwei-Wert-Syntax für die Hintergrundgröße. Es gibt vier verschiedene Syntaxen, die Sie mit dieser Eigenschaft verwenden können: die Schlüsselwortsyntax, die Ein-Wert-Syntax, die Zwei-Wert-Syntax und die Mehrfachhintergrund-Syntax.
Schlüsselwörter
Zusätzlich zum Standardwert ( auto) gibt es zwei Schlüsselwörter, mit denen Sie arbeiten können background-size: coverundcontain
+it+counts+for+the+width,+and+the+height+is+set+to+%3Ccode+translate%3D%22no%22+translate%3D%22no%22%3Eauto%3C/code%3E.+You+can+use+any+CSS+size+units+you+like,+including+pixels,+percentages,+ems,+viewport+units,+etc.%3C/p%3E%3Ch3%3ETwo+Values%3C/h3%3E%3Cp%3EIf+you+provide+two+values,+the+first+sets+the+background+image%E2%80%99s+width+and+the+second+sets+the+height.+Like+the+single+value+syntax,+you+can+use+whatever+measurement+units+you+like.%3C/p%3E%3Ch3%3EMultiple+Images%3C/h3%3E%3Cp%3EYou+can+also+combine+any+of+the+above+methods+and+apply+them+to+multiple+images,+simply+by+adding+commas+between+each+syntax.+Example:%3C/p%3E%3Cpre+translate%3D%22no%22+rel%3D%22CSS%22%3E%3Ccode+translate%3D%22no%22+class%3D%22language-css%22%3Ehtml+(+background:+url(greatimage.jpg.webp),+url(wonderfulimage.jpg.webp);+background-size:+300px+100px,+cover;+/*+first+image+is+300x100,+second+image+covers+the+whole+area+*/+)%3C/code%3E%3C/pre%3E%3Cp%3EKeep+background+image+stacking+order+in+mind+when+using+multiple+images.%3C/p%3E%3Ch3%3EDemo%3C/h3%3E%3Cp%3EThis+demo+shows+examples+of+%3Ccode+translate%3D%22no%22+translate%3D%22no%22%3Ecover%3C/code%3E,+%3Ccode+translate%3D%22no%22+translate%3D%22no%22%3Econtain%3C/code%3E,+and+multiple+background+images+with+a+mix+of+pixel+and+keyword+values.%3C/p%3E%3Cp+style%3D%22height:+268px;+display:+flex;+align-items:+center;+justify-content:+center;+border:+2px+solid+black;+margin:+1rem+0;+padding:+1rem;+overflow:+auto;%22+class%3D)
Siehe die Hintergrundgröße des Stifts nach CSS-Tricks (@ css-Tricks) auf CodePen.
verbunden
- Hintergrund-Anhang
- Hintergrund-Clip
- Hintergrundfarbe
- Hintergrundbild
- Hintergrundherkunft
- Hintergrundposition
- Hintergrund Wiederholung
Mehr Ressourcen
- CSS3 Spec
- MDN
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3+ | 4.1+ | 3,6+ | 10+ | 9+ | 2.3+ | 4.0+ |