Μέγεθος μάσκας - CSS-Κόλπα

Στο CSS, η ιδιότητα μεγέθους μάσκας καθορίζει το μέγεθος μιας εικόνας επιπέδου μάσκας. Με πολλούς τρόπους, λειτουργεί σαν το background-sizeακίνητο.

.element ( mask-image: url(star.svg); mask-size: 200px 100px; )

Η κάλυψη σάς επιτρέπει να εμφανίζετε επιλεγμένα μέρη ενός στοιχείου ενώ κρύβετε τα υπόλοιπα. Το μέγεθος της μάσκας καθορίζεται από την mask-sizeιδιότητα.

Στην παρακάτω επίδειξη μπορείτε να παίξετε με το μέγεθος της εικόνας στρώματος μάσκας:

Σύνταξη

mask-size: = ( = | | auto )(1,2) | cover | contain

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

Αυτό βασικά λέει ότι η σύνταξη δέχεται μια τιμή μεγέθους φόντου ( ) που μπορεί να είναι ένα ή δύο μήκη ή / και ποσοστά ( ), να οριστεί σε autoή μία από δύο λέξεις-κλειδιά ( coverκαι contain)

• Όταν χρησιμοποιούνται δύο τιμές , η πρώτη τιμή καθορίζει το πλάτος της εικόνας μάσκας και η δεύτερη τιμή καθορίζει το ύψος της .
• Όταν χρησιμοποιείται μια τιμή που δεν περιέχει ή καλύπτει, καθορίζει το πλάτος της εικόνας της μάσκας και το ύψος θεωρείται ότι είναι auto.

Αξίες

/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */ 
 /* Keywords */ mask-size: contain; mask-size: cover; 
 /* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;

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

• : Οποιαδήποτε έγκυρη και μη-αρνητικό μήκος CSS, όπως px, em, remκαι %, μεταξύ άλλων.
• : Καθορίζει το μέγεθος της εικόνας επιπέδου μάσκας ως ποσοστιαία τιμή σε σχέση με την περιοχή τοποθέτησης της μάσκας, η οποία καθορίζεται από την τιμή του mask-origin. Από προεπιλογή, αυτή η τιμή είναι border-box, που σημαίνει ότι περιέχει περιγράμματα, παραγέμισμα και περιεχόμενο του πλαισίου.
• auto: Χρησιμοποιείται το εγγενές ύψος και πλάτος της εικόνας μάσκας και, για εικόνες όπως κλίσεις που δεν έχουν εγγενείς διαστάσεις, αποδίδεται στο μέγεθος της περιοχής τοποθέτησης της μάσκας.
• contain: Κλίμακα της εικόνας της μάσκας διατηρώντας παράλληλα την εγγενή αναλογία της κατά τρόπο ώστε τόσο το πλάτος όσο και το ύψος της να μπορούν να χωρέσουν μέσα στην περιοχή τοποθέτησης της μάσκας. Για εικόνες όπως ντεγκραντέ που δεν έχουν εγγενείς διαστάσεις, αποδίδεται στο μέγεθος της περιοχής τοποθέτησης της μάσκας.
• cover: Κλίμακα της εικόνας της μάσκας διατηρώντας παράλληλα την εγγενή αναλογία της κατά τρόπο ώστε τόσο το πλάτος όσο και το ύψος της να καλύπτουν πλήρως την περιοχή τοποθέτησης της μάσκας. Για εικόνες όπως ντεγκραντέ που δεν έχουν εγγενείς διαστάσεις, αποδίδεται στο μέγεθος της περιοχής τοποθέτησης της μάσκας.
• initial: Εφαρμόζει την προεπιλεγμένη ρύθμιση της ιδιότητας, η οποία είναι auto.
• inherit: Υιοθετεί την τιμή μεγέθους μάσκας του γονέα.
• unset: Αφαιρεί το ρεύμα mask-sizeαπό το στοιχείο.

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

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

Στο ακόλουθο παράδειγμα, η πρώτη τιμή καθορίζει το μέγεθος της πρώτης εικόνας, η δεύτερη τιμή καθορίζει το μέγεθος της δεύτερης εικόνας και ούτω καθεξής.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-size: 100px 100%, auto, contain; )

Η autoτιμή

Εάν η τιμή της mask-sizeιδιότητας έχει οριστεί ως autoεξής:

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

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

Αναλογία / Διάσταση	Χωρίς εγγενείς διαστάσεις	Μια εγγενής διάσταση	Και οι δύο εγγενείς διαστάσεις
Έχει αναλογία	Έγινε σαν να είχε καθοριστεί το περιεχόμενο	Αποδόθηκε στο μέγεθος που καθορίζεται από αυτήν τη διάσταση και την αναλογία	Δόθηκε σε αυτό το μέγεθος
Χωρίς αναλογία	Έδωσε στο μέγεθος της περιοχής τοποθέτησης της μάσκας	Δόθηκε χρησιμοποιώντας την εγγενή διάσταση και την αντίστοιχη διάσταση της περιοχής τοποθέτησης της μάσκας	ΟΧΙ

Εάν η τιμή του mask-sizeκαθορίζεται με autoκαι μια άλλη μη αυτόματη τιμή όπως η ακόλουθη:

.element ( mask-size: auto 200px; )

… έπειτα:

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

Κατανόηση coverκαιcontain

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

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

Και τι ακριβώς είναι μια εγγενής διάσταση και εγγενής αναλογία;

Οι εγγενείς διαστάσεις είναι πλάτος και ύψος ενός στοιχείου και η εσωτερική αναλογία είναι η αναλογία αυτών.

• Ένα bitmap όπως μια μορφή PNG, έχει πάντα εγγενείς διαστάσεις και εγγενή αναλογία.
• Μια διανυσματική εικόνα όπως μια μορφή SVG, μπορεί να έχει και τις δύο εγγενείς διαστάσεις. Επομένως, έχει επίσης εγγενή αναλογία. Μπορεί επίσης να έχει μία ή καθόλου εγγενείς διαστάσεις και, σε κάθε περίπτωση, μπορεί να έχει ή να μην έχει εγγενή αναλογία.
• Οι κλίσεις είναι σαν εικόνες χωρίς εγγενείς διαστάσεις ή εγγενή αναλογία.

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

ΙΕ	Ακρη	Firefox	Χρώμιο	Σαφάρι	ΛΥΡΙΚΗ ΣΚΗΝΗ
Οχι	18+	53+	Ολα	4+	70

Android Chrome	Android Firefox	Πρόγραμμα περιήγησης Android	iOS Safari	Opera Mini
85+	79+	4.4+	Ολα	Ολα

Διαδήλωση

Η παρακάτω επίδειξη χρησιμοποιεί ένα μήκος για το μέγεθος της μάσκας. Δοκιμάστε να αλλάξετε την τιμή σε άλλους τύπους τιμών στον κώδικα και ελέγξτε το αποτέλεσμα.

Περισσότερες πληροφορίες

• CSS Masking Module Level 1
• Αποκοπή και απόκρυψη σε CSS
• Αποκοπή εναντίον απόκρυψης: Πότε να χρησιμοποιείται καθεμιά
• # 185: Παίζοντας με μάσκες CSS (βίντεο)