Φόντο-εικόνα - CSS-Κόλπα

Anonim

Η background-imageιδιότητα στο CSS εφαρμόζει ένα γραφικό (π.χ. PNG, SVG, JPG.webp, GIF, WEBP) ή μια διαβάθμιση στο φόντο ενός στοιχείου.

Υπάρχουν δύο διαφορετικοί τύποι εικόνων που μπορείτε να συμπεριλάβετε με CSS: κανονικές εικόνες και ντεγκραντέ.

Εικόνες

Η χρήση μιας εικόνας σε φόντο είναι πολύ απλή:

body ( background: url(sweettexture.jpg.webp); )

Η url()τιμή σάς επιτρέπει να παρέχετε μια διαδρομή αρχείου σε οποιαδήποτε εικόνα και θα εμφανίζεται ως φόντο για αυτό το στοιχείο.

Μπορείτε επίσης να ορίσετε ένα URI δεδομένων για το url(). Μοιάζει με αυτό:

body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )

Αυτή η τεχνική καταργεί ένα αίτημα HTTP, το οποίο είναι καλό. Ωστόσο, υπάρχουν ορισμένα μειονεκτήματα, οπότε πριν αρχίσετε να αντικαθιστάτε όλες τις εικόνες σας, βεβαιωθείτε ότι έχετε λάβει υπόψη όλα τα πλεονεκτήματα και τα μειονεκτήματα των URI δεδομένων.

Μπορείτε επίσης να χρησιμοποιήσετε background-imageγια να κάνετε sprite εικόνες, που είναι μια άλλη χρήσιμη μέθοδος για τη μείωση αιτημάτων HTTP.

Κλίσεις

Μια άλλη επιλογή κατά τη χρήση φόντου είναι να πείτε στο πρόγραμμα περιήγησης να δημιουργήσει μια κλίση. Ακολουθεί ένα απλό παράδειγμα γραμμικού ντεγκραντέ:

body ( background: linear-gradient(black, white); )

Μπορείτε επίσης να χρησιμοποιήσετε ακτινικές κλίσεις:

body ( background: radial-gradient(circle, black, white); )

Από τεχνικής απόψεως, οι κλίσεις είναι μια άλλη μορφή εικόνας φόντου. Η διαφορά είναι ότι το πρόγραμμα περιήγησης δημιουργεί την εικόνα για εσάς. Δείτε πώς να τα γράψετε: CSS3 Gradient Syntax

Το παραπάνω παράδειγμα χρησιμοποιεί μόνο μία κλίση, αλλά μπορείτε επίσης να τοποθετήσετε πολλαπλές κλίσεις το ένα πάνω στο άλλο. Υπάρχουν μερικά εκπληκτικά σχέδια που μπορείτε να δημιουργήσετε χρησιμοποιώντας αυτήν την τεχνική.

Ρύθμιση εναλλακτικού χρώματος

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

body ( background: url(sweettexture.jpg.webp) blue; )

Πολλαπλές εικόνες φόντου

Μπορείτε να χρησιμοποιήσετε πολλές εικόνες, ή ένα μείγμα εικόνων και ντεγκραντέ, για το φόντο σας. Πολλές εικόνες φόντου υποστηρίζονται καλά (όλα τα σύγχρονα προγράμματα περιήγησης και IE9 + για γραφικές εικόνες, IE10 + για διαβαθμίσεις).

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

body ( background: url(logo.png.webp), url(background-pattern.png.webp); )

Όταν χρησιμοποιείτε πολλές εικόνες φόντου, συχνά θα πρέπει να ορίσετε περισσότερες τιμές για το φόντο για να έχετε τα πάντα στο σωστό μέρος. Εάν θέλετε να χρησιμοποιήσετε το backgroundστενό, μπορείτε να ορίσετε τις τιμές για κάθε εικόνα ξεχωριστά. Το στενό σας θα μοιάζει με αυτό (παρατηρήστε το κόμμα που διαχωρίζει την πρώτη εικόνα και τις τιμές του από τη δεύτερη εικόνα και τις τιμές του):

body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )

Δεν υπάρχει όριο στον αριθμό των εικόνων φόντου που μπορείτε να ορίσετε και μπορείτε να κάνετε εντυπωσιακά πράγματα όπως να κινούσετε τις εικόνες φόντου σας Υπάρχει ένα καλό παράδειγμα πολλαπλών εικόνων φόντου με κινούμενα σχέδια στο blog του David Walsh.

Διαδήλωση

Δείτε την εικόνα φόντου της πένας από CSS-Tricks (@ css-tricks) στο CodePen.

Σχετιζομαι με

  • φόντο-συνημμένο
  • φόντο-κλιπ
  • χρώμα του φόντου
  • φόντο-προέλευση
  • φόντο-θέση
  • επανάληψη φόντου
  • μέγεθος φόντου

Περισσότεροι πόροι

  • Οι προδιαγραφές CSS3
  • MDN
  • Τέλειες εικόνες φόντου πλήρους σελίδας
  • Mastering CSS Gradients (Slideeck)

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

Τακτικές εικόνες λειτουργούν παντού και πολλές εικόνες λειτουργούν σε μοντέρνα προγράμματα περιήγησης και IE9 +. Εδώ είναι η υποστήριξη για κλίσεις:

Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ ΙΕ Android iOS
10+ 5.1+ 3.6+ 12.1+ 10+ 4+ 5.1+