Προέλευση μάσκας - CSS-Κόλπα

Η mask-originκαθορίζει την περιοχή θέσης μάσκα μιας εικόνας στοιβάδα μάσκας. Με άλλα λόγια, καθορίζει πού είναι η προέλευση της εικόνας του επιπέδου μάσκας, είτε είναι η άκρη του περιγράμματος, το πλαίσιο επένδυσης ή το περιεχόμενο.

.element ( mask-image: url(star.svg); mask-origin: content-box; )

Για στοιχεία που αποδίδονται ως ένα κουτί, mask-originκαθορίζει την περιοχή τοποθέτησης της μάσκας. Για στοιχεία που αποδίδονται ως πολλαπλά πλαίσια (π.χ., ενσωματωμένα κουτιά σε πολλές γραμμές, κουτιά σε πολλές σελίδες) η ιδιότητα καθορίζει σε ποια πλαίσια box-decoration-breakλειτουργεί για να προσδιορίσει την περιοχή τοποθέτησης της μάσκας.

Αυτή η ιδιότητα λειτουργεί όπως η background-originιδιότητα, εκτός από το ότι έχει διαφορετική αρχική τιμή και τρεις πρόσθετες τιμές που ισχύουν για στοιχεία SVG.

Στην παρακάτω επίδειξη μπορείτε να αλλάξετε την προέλευση της εικόνας επιπέδου μάσκας. Υπάρχει η ίδια εικόνα από κάτω για να δείξει το αποτέλεσμα της καλύτερης κάλυψης και της σήμανσης των συνόρων και των περιοχών επένδυσης:

Σύνταξη

mask-origin: = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

Αρχική τιμή: border-box
Ισχύει για: Όλα τα στοιχεία. Στο SVG, ισχύει για στοιχεία κοντέινερ εκτός από το στοιχείο, όλα τα στοιχεία γραφικών και το στοιχείο.
Κληρονομική: όχι
Τύπος κινούμενης εικόνας: διακριτός

Αξίες

/* Keywords */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;   /* Global values */ mask-origin: intial; mask-origin: inherit; mask-origin: unset;

Ορισμοί τιμής

content-box: Η θέση είναι σχετική με το πλαίσιο περιεχομένου. Η προέλευση του mask-imageτοποθετείται στην επάνω αριστερή γωνία του άκρου περιεχομένου.
padding-box: Η θέση είναι σχετική με το κουτί επένδυσης. Η προέλευση της εικόνας μάσκας 0 0είναι τοποθετημένη στην επάνω αριστερή γωνία της άκρης επένδυσης, 100% 100%είναι η κάτω δεξιά γωνία.
border-box: Η προεπιλεγμένη τιμή, η οποία ορίζει τη θέση σε σχέση με το πλαίσιο περιγράμματος.
margin-box: Η θέση είναι σχετική με το πλαίσιο περιθωρίου
fill-box: Η θέση είναι σχετική με το πλαίσιο οριοθέτησης αντικειμένων
stroke-box: Η θέση είναι σχετική με το πλαίσιο εγκεφαλικού επεισοδίου
view-box: Χρησιμοποιεί την πλησιέστερη θύρα προβολής SVG ως πλαίσιο αναφοράς. Εάν viewBoxέχει καθοριστεί ένα χαρακτηριστικό για το στοιχείο δημιουργίας θύρας προβολής SVG, τότε το πλαίσιο αναφοράς τοποθετείται στην αρχή του συστήματος συντεταγμένων που καθορίζεται από το viewBoxχαρακτηριστικό και η διάσταση του πλαισίου αναφοράς ρυθμίζεται στις τιμές widthκαι τις heightτιμές του viewBoxχαρακτηριστικού.
initial: Εφαρμόζει την προεπιλεγμένη ρύθμιση της ιδιότητας, η οποία είναιborder-box
inherit: Υιοθετεί την mask-originαξία του γονέα.
unset: Αφαιρεί το ρεύμα mask-originαπό το στοιχείο.

Χρήση πολλαπλών τιμών

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

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-origin: padding-box, border-box, content-box; )

Σημειώσεις

Για SVG στοιχεία χωρίς συνδεδεμένο κουτί διάταξη CSS, τις αξίες content-box, padding-boxκαι border-boxυπολογίζουν σε fill-box.
Για τα στοιχεία με τις σχετικές CSS κουτί διάταξη, τις αξίες fill-box, stroke-boxκαι view-boxυπολογίζουν την initialαξία του mask-origin, η οποία είναι border-box.

Διαδήλωση

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

Αλλάξτε την τιμή για mask-originτην παρακάτω επίδειξη για να πάρετε μια καλύτερη ιδέα για το τι συμβαίνει: