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

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

mask-size Η ιδιότητα καθορίζει το μέγεθος της εικόνας καλύψης.

Παράδειγμα

Παράδειγμα 1

Ρυθμίστε το μέγεθος της εικόνας καλύψης (σε ποσοστό):

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

Προσπαθήστε να το δοκιμάσετε προσωπικά

Παράδειγμα 2

Ρυθμίστε το μέγεθος της εικόνας καλύψης (σε pixel):

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 200px 200px;
  mask-repeat: no-repeat;
}

Προσπαθήστε να το δοκιμάσετε προσωπικά

Γλώσσα CSS

mask-size: auto|μέγεθος|περιέχει|καλύπτει|καταρχάς|προληπτικά;

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

Τιμή Περιγραφή
αυτόματα προεπιλεγμένη τιμή
μέγεθος Ορίζει το μέγεθος της εικόνας καλύψης, μπορεί να χρησιμοποιηθούν μονάδες όπως px, em ή %.
περιέχει Ανεμοσκαλίστε την εικόνα καλύψης ώστε το πλάτος και το ύψος να προσαρμόζονται στο εσωτερικό του κουτιού.
καλύπτει Ανεμοσκαλίστε την εικόνα καλύψης ώστε το πλάτος και το ύψος να καλύπτουν τον κουτί.
καταρχάς Ρυθμίστε αυτήν την ιδιότητα στην προεπιλεγμένη της τιμή. Δείτε: καταρχάς.
προληπτικά Επιδίδεται από το γονικό στοιχείο του για αυτήν την ιδιότητα. Δείτε: προληπτικά.

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

Προεπιλεγμένη τιμή: αυτόματα
Προκλητικότητα: Όχι
Παραγωγή κίνησης: Δεν υποστηρίζεται. Εξετάστε:Ατρύπες σχετικές με την κίνηση.
Έκδοση: Μόδουλο Κάλυψης CSS Στάνταρ 1
Γλώσσα JavaScript: object.style.maskSize="100px 200px"

Υποστήριξη περιηγητών

Τα αριθμήματα στην τаблицή δείχνουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως το χαρακτηριστικό.

Χρόμιο Εντζ Φάιρφοξ Σάφάρι Οπερά
120 120 53 15.4 106

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

Εκμάθηση:CSS σκιές

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

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

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

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

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

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

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

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

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