CSS mask-mode ιδιότητα

Ορισμός και χρήση

mask-mode Η ιδιότητα καθορίζει αν η εικόνα μάσκας πρέπει να θεωρηθεί φωτεινή μάσκα ή μάσκα alpha.

Παράδειγμα

Δημιούργησε την εικόνα μάσκας ως φωτεινή μάσκα:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}

Προσπάθησε το εαυτό σου

Γλώσσα CSS

mask-mode: match-source|luminance|alpha|initial|inherit;

Τιμή ιδιότητας

Τιμή Περιγραφή
match-source

Αν η ιδιότητα mask-image είναι εικόνα (URL εικόνας ή διαβάθμιση), ρύθμισε την mask-mode σε alpha.

Αν η ιδιότητα mask-image είναι SVG <mask>, χρησιμοποίησε την ιδιότητα mask-type του στοιχείου <mask>.

Αυτή είναι η προεπιλεγμένη τιμή.
luminance Χρησιμοποίησε την τιμή φωτεινότητας της εικόνας μάσκας ως τιμή μάσκας.
alpha Χρησιμοποίησε την τιμή alpha της εικόνας μάσκας ως τιμή μάσκας.
initial Άφησε την ιδιότητα στην προεπιλεγμένη τιμή. Δείτε: initial.
inherit Απόκτησε την ιδιότητα από το γονικό στοιχείο. Δείτε: inherit.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: match-source
Εκληροδότηση: Όχι
Προσθήκη κινήσεων: Δεν υποστηρίζεται. Δείτε:Αντιθέματα κινήσεων.
Έκδοση: Κατάλογος Μάσκας CSS Μέρος 1
Γλώσσα JavaScript: object.style.maskMode="alpha"

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

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

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

Σχετικές σελίδες

Εκμάθηση:CSS Μαντείο

Αναφορά:CSS mask ιδιότητα

Αναφορά:CSS mask-clip ιδιότητα

Αναφορά:CSS mask-composite ιδιότητα

Αναφορά:CSS mask-image ιδιότητα

Αναφορά:CSS mask-origin ιδιότητα

Αναφορά:CSS mask-position ιδιότητα

Αναφορά:CSS mask-repeat ιδιότητα

Αναφορά:CSS mask-size ιδιότητα

Αναφορά:CSS mask-type ιδιότητα