Κλιπ μάσκας - CSS-Κόλπα

Anonim

Η mask-clipιδιότητα CSS αποτελεί μέρος των προδιαγραφών CSS Masking Module Level 1 και ορίζει την περιοχή βαφής μάσκας. Κλιπ κυριολεκτικά την περιοχή φόντου ενός στοιχείου και καθορίζει ποιες περιοχές εμφανίζονται μέσω της μάσκας: πλαίσιο, πλαίσιο ή περιεχόμενο. Είναι σαν να τοποθετείτε το πλαίσιο σε μια φωτογραφία, δείχνοντας μόνο τα μέρη της φωτογραφίας που δεν καλύπτονται από το πλαίσιο. Μόνο, σε αυτήν την περίπτωση, ορίζουμε τι περικοπεί χρησιμοποιώντας τιμές CSS Box Model.

.element ( mask-image: url(sun.svg); mask-clip: padding-box; )

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

Σύνταξη

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Αρχική τιμή: border-box
  • Ισχύει για: όλα τα στοιχεία. Στο SVG, ισχύει για στοιχεία κοντέινερ, εξαιρουμένου του στοιχείου, όλων των στοιχείων γραφικών.
  • Κληρονομική: όχι
  • Τύπος κινούμενης εικόνας: διακριτός

Αξίες

/* Keyword values */ mask-clip: border-box; mask-clip: content-box; mask-clip: fill-box; mask-clip: margin-box; mask-clip: padding-box; mask-clip: stroke-box; mask-clip: view-box; /* No clip */ mask-clip: no-clip; /* Global values */ mask-clip: intial; mask-clip: inherit; mask-clip: unset;
  • border-box: Το ζωγραφισμένο περιεχόμενο κόβεται στο πλαίσιο περιγράμματος. (Προεπιλεγμένη τιμή)
  • content-box: Το ζωγραφισμένο περιεχόμενο περικόπτεται στο πλαίσιο περιεχομένου.
  • fill-box: Το ζωγραφισμένο περιεχόμενο κόβεται στο πλαίσιο οριοθέτησης αντικειμένων.
  • margin-box: Το ζωγραφισμένο περιεχόμενο κόβεται στο πλαίσιο περιθωρίου.
  • padding-box: Το ζωγραφισμένο περιεχόμενο κόβεται στο κουτί επένδυσης.
  • stroke-box: Το ζωγραφισμένο περιεχόμενο περικόπτεται στο πλαίσιο περιγράμματος εγκεφαλικού επεισοδίου.
  • view-box: Χρησιμοποιεί την πλησιέστερη θύρα προβολής SVG ως πλαίσιο αναφοράς. Εάν viewBoxέχει καθοριστεί ένα χαρακτηριστικό για το στοιχείο δημιουργίας θύρας προβολής SVG:
    • Το πλαίσιο αναφοράς τοποθετείται στην αρχή του συστήματος συντεταγμένων που καθορίζεται από το viewBoxχαρακτηριστικό.
    • Η διάσταση του πλαισίου αναφοράς ορίζεται στις τιμές widthκαι τις heightτιμές του viewBoxχαρακτηριστικού.
  • no-clip: Το ζωγραφισμένο περιεχόμενο δεν είναι κομμένο.
  • initial: Εφαρμόζει την προεπιλεγμένη ρύθμιση της ιδιότητας, η οποία είναι border-box.
  • inherit: Υιοθετεί την mask-clipαξία του γονέα.
  • unset: Αφαιρεί το ρεύμα mask-clipαπό το στοιχείο.

Σημειώσεις

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

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

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

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

Διαδήλωση

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

ΙΕ Ακρη Firefox Χρώμιο Σαφάρι ΛΥΡΙΚΗ ΣΚΗΝΗ
Οχι 79+ 53+ Ολα 4+ 15+
Android Chrome Android Firefox Πρόγραμμα περιήγησης Android iOS Safari Opera Mobile
Ολα Ολα Ολα Ολα 59+
Πηγή: caniuse

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

Άρθρο στις 6 Νοεμβρίου 2016

Αποκοπή και απόκρυψη σε CSS

Mojtaba Seyedi