Φόντο - CSS-Κόλπα | CSS Almanac 2025

Η backgroundιδιότητα στο CSS σάς επιτρέπει να ελέγχετε το φόντο οποιουδήποτε στοιχείου (τι χρωματίζει κάτω από το περιεχόμενο σε αυτό το στοιχείο). Είναι μια στενή ιδιότητα, που σημαίνει ότι σας επιτρέπει να γράψετε ποιες θα ήταν πολλές ιδιότητες CSS σε μία. Σαν αυτό:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background αποτελείται από οκτώ άλλες ιδιότητες:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Μπορείτε να χρησιμοποιήσετε οποιονδήποτε συνδυασμό αυτών των ιδιοτήτων που θέλετε, με σχεδόν οποιαδήποτε σειρά (αν και η παραγγελία που προτείνεται στην προδιαγραφή είναι παραπάνω). Υπάρχει όμως ένα gotcha: οτιδήποτε δεν καθορίζετε στην backgroundιδιότητα ορίζεται αυτόματα στην προεπιλογή του. Έτσι, αν κάνετε κάτι τέτοιο:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Το φόντο θα είναι διαφανές, αντί για κόκκινο. Ωστόσο, η επιδιόρθωση είναι εύκολη: απλώς ορίστε background-colorμετά backgroundή απλώς χρησιμοποιήστε το στενό (π.χ. background: url(… ) red;)

Πολλαπλά υπόβαθρα

Το CSS3 πρόσθεσε υποστήριξη για πολλαπλά φόντα, τα οποία επικαλύπτονται το ένα πάνω στο άλλο. Κάθε ιδιότητα που σχετίζεται με φόντο μπορεί να λάβει μια λίστα διαχωρισμένη με κόμμα, όπως αυτή:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Κάθε τιμή στη λίστα διαχωρισμένη με κόμμα αντιστοιχεί σε ένα επίπεδο: η πρώτη τιμή είναι το ανώτερο επίπεδο, η δεύτερη τιμή είναι το δεύτερο επίπεδο και το χρώμα φόντου είναι πάντα το τελευταίο επίπεδο.

Συνταγές

Δείτε το στυλό emBzRd του Timothy Miller (@tjacobdesign) στο CodePen.

Υποστήριξη προγράμματος περιήγησης

Η υποστήριξη ποικίλλει μεταξύ των διαφορετικών συγκεκριμένων ιδιοτήτων και κάθε αντίστοιχο άρθρο στο Almanac έχει μοναδικές σημειώσεις υποστήριξης προγράμματος περιήγησης. Τα βασικά μονόχρωμα φόντα και οι μεμονωμένες εικόνες λειτουργούν παντού, και οτιδήποτε δεν υποστηρίζεται απλώς επιστρέφει στο επόμενο καλύτερο πράγμα, είτε πρόκειται για εικόνα είτε για χρώμα.