Λειτουργία μάσκας - CSS-Κόλπα

Η mask-modeιδιότητα CSS δείχνει εάν η εικόνα επιπέδου μάσκας CSS αντιμετωπίζεται ως μάσκα άλφα ή μάσκα φωτεινότητας.

.element ( mask-image: url(sun.svg); mask-mode: alpha; )

Σύνταξη

mask-mode: alpha | luminance | match-source

Η ιδιοκτησία δέχεται μία λέξη-κλειδί αξία, ή μια λίστα διαχωρισμένη με κόμματα των δύο ή και τα τρία από τα alpha, luminanceκαι mask-sourceαξίες.

Αρχική τιμή: match-source
Ισχύει για: όλα τα στοιχεία. Στο SVG, ισχύει για στοιχεία κοντέινερ, εξαιρουμένου του στοιχείου, όλων των στοιχείων γραφικών.
Κληρονομική: όχι
Υπολογισμένη τιμή: όπως καθορίζεται
Τύπος κινούμενης εικόνας: διακριτός

Αξίες

/* Keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* Global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset;

alpha: καθορίζει ότι οι τιμές άλφα (κανάλι άλφα) της εικόνας επιπέδου μάσκας πρέπει να χρησιμοποιούνται ως τιμές μάσκας.
luminance: καθορίζει ότι οι τιμές φωτεινότητας της εικόνας μάσκας πρέπει να χρησιμοποιούνται ως τιμές μάσκας.
match-source: η προεπιλεγμένη τιμή, η οποία ορίζει τη λειτουργία μάσκας σε άλφα εάν η μάσκα αναφοράς της mask-imageιδιότητας είναι ένα στοιχείο CSS όπως μια διεύθυνση URL εικόνας ή μια διαβάθμιση. Ωστόσο, εάν η αναφορά μάσκας της mask-imageιδιότητας είναι ένα στοιχείο SVG , πρέπει να χρησιμοποιηθεί η τιμή που καθορίζεται από την ιδιότητα τύπου μάσκας του αναφερόμενου στοιχείου.
initial: εφαρμόζει την προεπιλεγμένη ρύθμιση της ιδιότητας, η οποία είναι match-source.
inherit: υιοθετεί την τιμή λειτουργίας μάσκας του γονέα.
unset: αφαιρεί την τρέχουσα λειτουργία μάσκας από το στοιχείο.

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

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

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

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-mode: luminance, alpha, match-source; )

Μάσκες άλφα και φωτεινότητας

Η κάλυψη στο CSS συνοδεύεται από δύο μεθόδους που έχουν κάποιες διαφορές στον υπολογισμό των τιμών μάσκας.

Άλφα μάσκες

Οι εικόνες είναι κατασκευασμένες από pixel, κάθε pixel έχει ορισμένα δεδομένα που περιέχουν τιμές χρώματος και ίσως τιμές alpha με πληροφορίες διαφάνειας. Μια εικόνα με κανάλι άλφα μπορεί να είναι μάσκα άλφα , όπως εικόνες PNG με μαύρες και διαφανείς περιοχές.

Σε μια απλή λειτουργία κάλυψης, έχουμε ένα στοιχείο και μια εικόνα μάσκας τοποθετημένη πάνω του. Η τιμή άλφα κάθε εικονοστοιχείου στην εικόνα μάσκας θα συγχωνευτεί με το αντίστοιχο εικονοστοιχείο στο στοιχείο.

Εάν η τιμή άλφα είναι μηδέν (δηλ. Διαφανής), κερδίζει και το μέρος του στοιχείου καλύπτεται (δηλαδή κρυφό).
Μια τιμή άλφα ενός (δηλ. Πλήρως αδιαφανής) επιτρέπει σε αυτό το pixel του στοιχείου να είναι ορατό.
Μια τιμή μεταξύ 0 και 1 (π.χ. 0,5) επιτρέπει στο pixel να είναι ορατό αλλά με ένα ορισμένο επίπεδο διαφάνειας.

Έτσι, σε αυτή τη μέθοδο, η τιμή της μάσκας σε ένα δεδομένο σημείο είναι απλά η τιμή του καναλιού άλφα σε αυτό το σημείο της εικόνας μάσκας και τα κανάλια χρώματος δεν συμβάλλουν στην τιμή της μάσκας.

Το παρακάτω παράδειγμα είναι μια μάσκα άλφα που περιέχει μόνο μαύρο (τιμή άλφα 1) και διαφανείς περιοχές (τιμή άλφα 0) και μπορείτε να δείτε το αποτέλεσμα που έχει μερικά μέρη πλήρως ορατά και άλλα πλήρως διαφανή:

Χρήση PNG με κανάλι άλφα ως εικόνα μάσκας

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

img ( mask-image: linear-gradient(black, transparent); mask-mode: alpha; )

Και εδώ φαίνεται το αποτέλεσμα στο πρόγραμμα περιήγησης:

Χρησιμοποιώντας μια γραμμική κλίση ως εικόνα μάσκας

Μάσκες φωτεινότητας

Σε μια μάσκα φωτεινότητας, τα χρώματα και οι τιμές άλφα έχουν σημασία. Όταν η τιμή άλφα είναι 0 (δηλ. Πλήρως διαφανής), το στοιχείο κρύβεται. όταν υπάρχει τιμή alpha 1, οι τιμές της μάσκας διαφέρουν ανάλογα με το κανάλι χρώματος αυτού του pixel. Για παράδειγμα, όταν το χρώμα είναι λευκό, το στοιχείο είναι ορατό. στην περίπτωση της μαύρης περιοχής, το στοιχείο είναι κρυφό.

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

Υπολογίστε μια τιμή φωτεινότητας από τις τιμές του καναλιού χρώματος.
Πολλαπλασιάστε την υπολογισμένη τιμή φωτεινότητας με την αντίστοιχη τιμή άλφα για να παράγετε την τιμή μάσκας

/ εξήγηση Για περισσότερες πληροφορίες σχετικά με αυτούς τους υπολογισμούς, μπορείτε να δείτε την ενότητα επεξεργασίας μάσκας στην προδιαγραφή CSS Masking Module 1 από το Πρόχειρο του Σεπτεμβρίου 2019.

Το Bellow είναι μια εικόνα μάσκας με λευκό ήλιο στο κέντρο και διαφανείς περιοχές γύρω από αυτό. Όπως μπορείτε να δείτε, οι περιοχές ενώ είναι πλήρως ορατές:

Χρήση εικόνας PNG με κανάλι άλφα και λευκές περιοχές ως εικόνα μάσκας

Και στο επόμενο παράδειγμα, χρησιμοποιείται μια πολύχρωμη κλίση ως εικόνα μάσκας και μπορείτε να δείτε την επίδραση διαφορετικών χρωμάτων στις τιμές της μάσκας στη λειτουργία φωτεινότητας: