Η background-sizeιδιότητα στο CSS είναι μία από τις πιο χρήσιμες - και πιο περίπλοκες - από τις ιδιότητες του φόντου. Υπάρχουν πολλές παραλλαγές και διαφορετικές συνταγές που μπορείτε να χρησιμοποιήσετε για αυτήν την ιδιότητα, οι οποίες έχουν διαφορετικές περιπτώσεις χρήσης. Ακολουθεί ένα βασικό παράδειγμα:
html ( background: url(greatimage.jpg.webp); background-size: 300px 100px; )Αυτό είναι ένα παράδειγμα της σύνταξης δύο τιμών για το μέγεθος του φόντου. Υπάρχουν τέσσερις διαφορετικές σύνταξη που μπορείτε να χρησιμοποιήσετε με αυτήν την ιδιότητα: τη σύνταξη λέξεων-κλειδιών, τη σύνταξη μιας τιμής, τη σύνταξη δύο τιμών και τη σύνταξη πολλαπλών φόντου.
Λέξεις-κλειδιά
Εκτός από την προεπιλεγμένη τιμή ( auto), υπάρχουν δύο λέξεις-κλειδιά που μπορείτε να χρησιμοποιήσετε με background-size: coverκαιcontain
+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)
Δείτε το μέγεθος φόντου της πένας από CSS-Tricks (@ css-tricks) στο CodePen.
Σχετιζομαι με
- φόντο-συνημμένο
- φόντο-κλιπ
- χρώμα του φόντου
- εικόνα φόντου
- φόντο-προέλευση
- φόντο-θέση
- επανάληψη φόντου
Περισσότεροι πόροι
- Προδιαγραφές CSS3
- MDN
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| 3+ | 4.1+ | 3.6+ | 10+ | 9+ | 2.3+ | 4.0+ |