CSS mask-repeat attribute

Προηγούμενη σελίδα mask-position
Επόμενη σελίδα mask-size

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

mask-repeat Η ιδιότητα ορίζει αν και πώς επαναλαμβάνεται η εικόνα μάσκας.

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

Παράδειγμα

Παράδειγμα 1

χρησιμοποιήστε mask-repeat: no-repeat; και mask-repeat: repeat;:

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

Προσπαθήστε το μόνοι σας

Παράδειγμα 2

χρησιμοποιήστε mask-repeat: round; και mask-repeat: space;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

Προσπαθήστε το μόνοι σας

Παράδειγμα 3

χρησιμοποιήστε mask-repeat: repeat-x; και mask-repeat: repeat-y;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

Προσπαθήστε το μόνοι σας

Γλώσσα σύνταξης CSS

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

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

Τιμή	Περιγραφή
repeat	Η εικόνα μάσκας επαναλαμβάνεται τόσο σε καθετίδιας όσο και σε οριζόντιας κατεύθυνση. Αν η τελευταία εικόνα δεν ταιριάζει, θα κόψεται. Αυτό είναι η προεπιλεγμένη τιμή.
repeat-x	Η εικόνα μάσκας επαναλαμβάνεται μόνο σε οριζόντιας κατεύθυνση.
repeat-y	Η εικόνα μάσκας επαναλαμβάνεται μόνο σε καθετίδιας κατεύθυνση.
space	Η εικόνα μάσκας επαναλαμβάνεται όσο το δυνατόν περισσότερο χωρίς να κόβεται. Η πρώτη και η τελευταία εικόνα fixστοιχείου στο πλάι του στοιχείου, το κενό μεταξύ των εικόνων είναι εξίσου διανεμημένο.
round	Η εικόνα μάσκας επαναλαμβάνεται και συμπιέζεται ή κρέμεται για να γεμίσει το χώρο ( χωρίς διαστήματα ).
no-repeat	Η εικόνα μάσκας δεν επαναλαμβάνεται. Η εικόνα θα εμφανιστεί μόνο μια φορά.
initial	Θέστε αυτήν την ιδιότητα στην προεπιλεγμένη της τιμή. Δείτε: initial.
inherit	Κληρονομεί αυτήν την ιδιότητα από το γονικό στοιχείο του. Δείτε: inherit.

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

Προεπιλεγμένη τιμή:	repeat
Κληρονομικότητα:	Όχι
Παραγωγή κινήσεων:	Δεν υποστηρίζεται. Δείτε:Παράμετροι κινήσεων.
Έκδοση:	Μονόλεπτο Μάσκας CSS Μέρος 1
Γλώσσα σύνταξης JavaScript:	object.style.maskRepeat="no-repeat"