Στο CSS, η mask-positionιδιότητα καθορίζει την αρχική θέση μιας εικόνας στρώματος μάσκας σε σχέση με την περιοχή θέσης μάσκας. Λειτουργεί όπως το background-positionακίνητο.
.element ( mask-image: url("star.svg"); mask-position: 20px center; )Η κάλυψη σάς επιτρέπει να εμφανίζετε επιλεγμένα μέρη ενός στοιχείου ενώ κρύβετε τα υπόλοιπα. Στην παρακάτω επίδειξη, μπορείτε να αλλάξετε τη θέση της εικόνας επιπέδου μάσκας:
Σύνταξη
mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )- Αρχική τιμή:
0% 0% - Ισχύει για: όλα τα στοιχεία. Στο SVG, ισχύει για στοιχεία κοντέινερ εκτός από το
στοιχείο, όλα τα γραφικά στοιχεία και τοστοιχείο. - Κληρονομική: όχι
- Υπολογιζόμενη τιμή: αποτελούμενη από: δύο λέξεις-κλειδιά που αντιπροσωπεύουν την προέλευση και δύο αντισταθμίσεις από αυτήν την προέλευση, κάθε μία ως απόλυτο μήκος (εάν δίνεται α
), διαφορετικά ως ποσοστό - Τύπος κινούμενης εικόνας: επαναλαμβανόμενη λίστα
Αξίες
Ένας μπορεί να προσδιοριστεί από την άποψη της offset λέξεων-κλειδιών ( top, left, bottom, right, και center), τα ποσοστά και οι τιμές μήκους σχετικά με τις άκρες του στοιχείου, παρόμοιο με το CSS background-positionιδιοκτησία.
/* Offset keywords */ mask-position: top; mask-position: right; mask-position: bottom; mask-position: left; mask-position: center;
/* Length values */ mask-position: 100px 200px; mask-position: 5rem 20%; mask-position: 0 10vh;
/* Percentage values */ mask-position: 25% 50%;
/* Global values */ mask-position: intial; mask-position: inherit; mask-position: unset;Ορισμοί τιμής
: Οποιαδήποτε έγκυρη μήκος CSS (όπωςpx,em,remκαι%, μεταξύ άλλων) το οποίο θα προσδιορίζει πόσο μακριά η ακμή της εικόνας μάσκας είναι από το αντίστοιχο άκρο του στοιχείου.: Καθορίζει τη θέση της εικόνας επιπέδου μάσκας ως ποσοστιαία τιμή σε σχέση με την περιοχή τοποθέτησης της μάσκας μείον το μέγεθος της εικόνας μάσκας.top: Ισοδύναμο με 0% για την κατακόρυφη θέση.right: Ισοδύναμο με 100% για την οριζόντια θέση.bottom: Ισοδύναμο με 100% για την κατακόρυφη θέση.left: Ισοδύναμο με 0% για την οριζόντια θέση.center: Ισοδυναμεί με 50% για την οριζόντια θέση εάν η οριζόντια θέση δεν ορίζεται διαφορετικά, ή 50% για την κατακόρυφη θέση, εάν είναι.initial: Εφαρμόζει την προεπιλεγμένη ρύθμιση της ιδιότητας, η οποία είναι 0% 0%.inherit: Υιοθετεί τηνmask-positionαξία του γονέα.unset: Αφαιρεί το ρεύμαmask-positionαπό το στοιχείο.
Χρήση πολλαπλών τιμών
Αυτή η ιδιότητα μπορεί να λάβει μια λίστα τιμών διαχωρισμένων με κόμματα για θέσεις μάσκας και κάθε τιμή εφαρμόζεται σε μια αντίστοιχη εικόνα επιπέδου μάσκας που καθορίζεται στην mask-imageιδιότητα. Στο ακόλουθο παράδειγμα, η πρώτη τιμή καθορίζει τη θέση της πρώτης εικόνας, η δεύτερη τιμή καθορίζει τη θέση της δεύτερης εικόνας και ούτω καθεξής.
.element ( mask-image: url("image-1.png.webp"), url("image-2.png.webp"), url("image-3.png.webp"); mask-position: 100px 10%, 0 right, center; )Διαφορετική σύνταξη
mask-position μπορεί να πάρει μία, δύο, τρεις ή τέσσερις τιμές για να καθορίσει τη θέση του στρώματος μάσκας οριζόντια και κάθετα.
Ενιαία τιμή
Σε περίπτωση που έχει οριστεί μία τιμή , η οποία λαμβάνεται ως η οριζόντια τιμή και η κατακόρυφη τιμή θεωρείται ότι είναι center.
mask-position: 100px; /* 100px center */Δύο τιμές
Σε περίπτωση χρήσης τιμών ζεύγους, η πρώτη λαμβάνεται ως οριζόντια τιμή και η δεύτερη καθορίζει τη θέση του στρώματος μάρκας κάθετα.
mask-position: 10% 50%; /* x=10%, Y=50% */Εάν και οι δύο τιμές είναι λέξεις-κλειδιά, τότε η σειρά των λέξεων-κλειδιών δεν έχει σημασία:
mask-position: top left; /* = left top */Αλλά όταν έχουμε έναν συνδυασμό λέξεων-κλειδιών και μήκους ή ποσοστού, η παραγγελία έχει σημασία και η πρώτη τιμή αντιστοιχεί πάντα στην οριζόντια μετατόπιση. Επομένως:
mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */Τρεις τιμές
Εάν δοθούν τρεις τιμές, η μετατόπιση που λείπει θεωρείται μηδέν:
mask-position: left 100px bottom; /* left=100px bottom=0 */Τέσσερις τιμές
Μια σύνταξη τεσσάρων τιμών σας επιτρέπει να καθορίσετε ποιες πλευρές του στοιχείου τοποθετείτε τη μάσκα σε σχέση με (τιμές 1 και 3) και, στη συνέχεια, την απόσταση μακριά από αυτές τις πλευρές (τιμές 2 και 4).
Έτσι, εάν θέλετε να τοποθετήσετε τη μάσκα 100px από το κάτω μέρος του στοιχείου και 200px από τα δεξιά, μπορείτε να κάνετε τα εξής:
mask-position: bottom 100px right 200px;Κινούμενες μάσκες
Είναι δυνατή η κίνηση της θέσης μάσκας και η mask-sizeχρήση κινούμενης εικόνας βασικού καρέ και μετάβασης CSS, όπως τα εξής:
.element ( mask-image: url("mask.png.webp"); mask-position: 10px 10px; transition: mask-position 1s ease-in-out; )
.element:hover ( mask-position: right 10px bottom 10px; )Σε αυτήν την επόμενη επίδειξη, ζωντάνουμε τη θέση του στρώματος μάσκας χρησιμοποιώντας κινούμενα σχέδια καρέ:
Διαδήλωση
Αλλάξτε την τιμή για mask-positionτην ακόλουθη επίδειξη:
Υποστήριξη προγράμματος περιήγησης
| ΙΕ | Ακρη | Firefox | Χρώμιο | Σαφάρι | ΛΥΡΙΚΗ ΣΚΗΝΗ |
|---|---|---|---|---|---|
| Οχι | 18+ | 53+ | 4+ | 3.2+ | 15+ |
| Android Chrome | Android Firefox | Πρόγραμμα περιήγησης Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 2.1+ | 3.2+ | 59+ |
Περισσότερες πληροφορίες
- CSS Masking Module Level 1 (Πρόχειρο συντάκτη)
- Αποκοπή και απόκρυψη σε CSS
- Αποκοπή εναντίον απόκρυψης: Πότε να χρησιμοποιείται καθεμιά
- # 185: Παίζοντας με μάσκες CSS (βίντεο)