Φόντο-θέση - CSS-Κόλπα

Anonim

Η background-positionιδιότητα στο CSS σάς επιτρέπει να μετακινείτε μια εικόνα φόντου (ή μια κλίση) γύρω από το κοντέινερ της.

html ( background-position: 100px 5px; )

Έχει τρεις διαφορετικούς τύπους τιμών:

  • Τιμές μήκους (π.χ. 100px 5px)
  • Ποσοστά (π.χ. 100% 5%)
  • Λέξεις-κλειδιά (π.χ. top right)

Οι προεπιλεγμένες τιμές είναι 0 0. Αυτό τοποθετεί την εικόνα φόντου σας επάνω αριστερά στο κοντέινερ.

Οι τιμές μήκους είναι αρκετά απλές: η πρώτη τιμή είναι η οριζόντια θέση, η δεύτερη τιμή είναι η κατακόρυφη θέση. Έτσι 100px 5pxθα μετακινήσετε την εικόνα 100px προς τα δεξιά και πέντε pixel προς τα κάτω. Μπορείτε να ρυθμίσετε τις τιμές μήκους με px, emή οποιαδήποτε από τις άλλες τιμές μήκους CSS.

Τα ποσοστά λειτουργούν λίγο διαφορετικά. Βγάλτε τα μαθηματικά σας καπέλα: μετακινώντας μια εικόνα φόντου κατά X% σημαίνει ότι θα ευθυγραμμίσει το σημείο X% στην εικόνα με το σημείο X% στο κοντέινερ. Για παράδειγμα, 50%σημαίνει ότι θα ευθυγραμμίσει τη μέση της εικόνας με τη μέση του κοντέινερ. 100%σημαίνει ότι θα ευθυγραμμίσει το τελευταίο pixel της εικόνας με το τελευταίο pixel του κοντέινερ και ούτω καθεξής.

Οι λέξεις-κλειδιά είναι απλώς συντομεύσεις για ποσοστά. Είναι πιο εύκολο να θυμάστε και να γράψετε top rightπαρά 100% 0, και γι 'αυτό οι λέξεις-κλειδιά είναι κάτι. Ακολουθεί μια λίστα με τις πέντε λέξεις-κλειδιά και τις αντίστοιχες τιμές τους:

  • top: 0% κάθετα
  • right: 100% οριζόντια
  • bottom: 100% κάθετα
  • left: 0% οριζόντια
  • center: 50% οριζόντια εάν οριζόντιος δεν έχει ήδη καθοριστεί. Εάν είναι, τότε εφαρμόζεται κάθετα.

Είναι ενδιαφέρον να σημειωθεί ότι δεν έχει σημασία ποια σειρά χρησιμοποιείτε για τις λέξεις-κλειδιά: top centerείναι το ίδιο με center top. Αυτό μπορείτε να το κάνετε μόνο αν χρησιμοποιείτε αποκλειστικά λέξεις-κλειδιά. center 10%δεν είναι το ίδιο με 10% center.

Διαδήλωση

Αυτό το demo δείχνει παραδείγματα background-positionσετ με ενότητες μήκους, ποσοστά και λέξεις-κλειδιά.

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

Δήλωση τιμών

Μπορείτε να δώσετε background-positionέως και τέσσερις τιμές στα σύγχρονα προγράμματα περιήγησης (ανατρέξτε στον πίνακα Υποστήριξη προγράμματος περιήγησης για λεπτομέρειες).

Εάν δηλώσετε μία τιμή , αυτή η τιμή είναι η οριζόντια μετατόπιση. Το πρόγραμμα περιήγησης ορίζει την κάθετη μετατόπιση σε center.

Όταν δηλώνετε δύο τιμές , η πρώτη τιμή είναι η οριζόντια μετατόπιση και η δεύτερη τιμή είναι η κατακόρυφη μετατόπιση.

Τα πράγματα γίνονται λίγο πιο περίπλοκα όταν αρχίζετε να χρησιμοποιείτε τρεις ή τέσσερις τιμές, αλλά έχετε επίσης μεγαλύτερο έλεγχο στην τοποθέτηση στο παρασκήνιο.

Μια σύνταξη τριών ή τεσσάρων τιμών εναλλάσσεται μεταξύ λέξεων-κλειδιών και ενοτήτων μήκους ή ποσοστού. Μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις τιμές λέξεων-κλειδιών εκτός centerαπό μια background-positionδήλωση τριών ή τεσσάρων τιμών .

Όταν καθορίζετε τρεις τιμές , το πρόγραμμα περιήγησης ερμηνεύει την τέταρτη τιμή "λείπει" ως 0. Ακολουθεί ένα παράδειγμα τριών τιμών background-position:

#threevalues ( background-position: right 45px bottom; )

Αυτό τοποθετεί την εικόνα φόντου 45 εικονοστοιχεία από τα δεξιά και 0 εικονοστοιχεία από το κάτω μέρος του κοντέινερ.

Ακολουθεί ένα παράδειγμα τεσσάρων τιμών background-position :

#fourvalues ( background-position: right 45px bottom 20px; )

Αυτό βάζει την εικόνα φόντου 45 εικονοστοιχεία από τα δεξιά και 20 εικονοστοιχεία από το κάτω μέρος του κοντέινερ.

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

Διαδήλωση

Αυτό το demo περιλαμβάνει παραδείγματα μιας τιμής, δύο τιμών, τριών τιμών και τεσσάρων τιμών background-position.

Δείτε τη σύνταξη τιμής παρασκηνίου-θέσης 1, 2, 3 και 4 από CSS-Tricks (@ css-tricks) στο CodePen.

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

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

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

  • background-position στις προδιαγραφές CSS3
  • background-position στο MDN
  • Εικόνες φόντου όφσετ

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

Οι βασικές τιμές υποστηρίζονται παντού. Η σύνταξη τεσσάρων τιμών έχει αυτήν την υποστήριξη:

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.

Επιφάνεια εργασίας

Χρώμιο Firefox ΙΕ Ακρη Σαφάρι
25 13 9 12 7

Κινητό / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7.0-7.1

Αυτό είναι το ίδιο επίπεδο υποστήριξης με το background-position-xκαι τις background-position-yιδιότητες.