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

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

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

Παράδειγμα

Παρουσίαση mask-composite Διαφορετικές τιμές της ιδιότητας

.masked {
  width: 200px;
  height: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;
  background: blue;
  -webkit-mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
  background: blue;
}
.mask1 {
  mask-composite: add;
}
.mask2 {
  mask-composite: subtract;
}
.mask3 {
  mask-composite: intersect;
}
.mask4 {
  mask-composite: exclude;
}

Δοκιμάστε το προσωπικά

Γλώσσα CSS

mask-composite: add|subtract|intersect|exclude|initial|inherit;

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

Τιμή Περιγραφή
add Η πηγή μάσκας τοποθετείται πάνω από τη στόχος μάσκα.
subtract Το μέρος που τοποθετείται έξω από τη στόχος μάσκα της πηγής μάσκας.
intersect Το μέρος που καλύπτεται από τη πηγή μάσκας και τη στόχος μάσκα αντικαθιστά τη στόχος μάσκα.
exclude Η περιοχή που δεν καλύπτεται από τη πηγή μάσκας και τη στόχος μάσκα συνδυάζεται.
initial Ρύθμιση αυτής της ιδιότητας στην προεπιλεγμένη τιμή. Δείτε: initial.
inherit Απόκτηση αυτής της ιδιότητας από το γονικό στοιχείο. Δείτε: inherit.

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

Προεπιλεγμένη τιμή: add
Κληρονομικότητα: Όχι
Δημιουργία αニμάτισης: Δεν υποστηρίζεται. Δείτε:Αντικειμενικές ιδιότητες της αニμάτισης.
Έκδοση: Μονόλεπτο Μάσκας CSS Επίπεδο 1
Γλώσσα JavaScript: object.style.maskComposite="intersect"

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

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

Χρωμέι Ετζ Φαξφρέξ Σαφάρι Οπερα
120 120 53 15.4 106

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

Εκμάθηση:Σκιά CSS

Παραδείγματα:CSS mask ιδιότητα

Παραδείγματα:CSS mask-clip ιδιότητα

Παραδείγματα:CSS mask-image ιδιότητα

Παραδείγματα:CSS mask-mode ιδιότητα

Παραδείγματα:CSS mask-origin ιδιότητα

Παραδείγματα:CSS mask-position ιδιότητα

Παραδείγματα:CSS mask-repeat ιδιότητα

Παραδείγματα:CSS mask-size ιδιότητα

Παραδείγματα:CSS mask-type ιδιότητα