108 of 313 menu

Ιδιότητα mask-repeat

Η ιδιότητα mask-repeat ορίζει τον τρόπο επανάληψης της μάσκας, εάν οι διαστάσεις της είναι μικρότερες από τις διαστάσεις του στοιχείου. Λειτουργεί παρόμοια με την background-repeat, αλλά εφαρμόζεται σε μάσκες.

Σύνταξη

επιλογέας { mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat; }

Τιμές

Τιμή Περιγραφή
repeat Η μάσκα επαναλαμβάνεται και στους δύο άξονες (προεπιλογή).
no-repeat Η μάσκα δεν επαναλαμβάνεται.
repeat-x Η μάσκα επαναλαμβάνεται μόνο οριζόντια.
repeat-y Η μάσκα επαναλαμβάνεται μόνο κάθετα.
space Η μάσκα επαναλαμβάνεται με ίσα διαστήματα.
round Η μάσκα κλιμακώνεται για ομοιόμορφη πλήρωση.

Παράδειγμα . Χωρίς επανάληψη (no-repeat)

Μία καρδιά στο κέντρο χωρίς επανάληψη:

<img id="image" src="image.jpg"> #image { width: 500px; height: 281px; mask-image: url("heart.svg"); mask-position: center; mask-size: 100px; mask-repeat: no-repeat; }

:

Παράδειγμα . Επανάληψη οριζόντια (repeat-x)

Οι καρδιές επαναλαμβάνονται μόνο οριζόντια:

<img id="image" src="image.jpg"> #image { width: 500px; height: 281px; mask-image: url("heart.svg"); mask-position: left center; mask-size: 50px; mask-repeat: repeat-x; }

:

Παράδειγμα . Επανάληψη κάθετα (repeat-y)

Οι καρδιές επαναλαμβάνονται μόνο κάθετα:

<img id="image" src="image.jpg"> #image { width: 500px; height: 281px; mask-image: url("heart.svg"); mask-position: center top; mask-size: 50px; mask-repeat: repeat-y; }

:

Παράδειγμα . Επανάληψη με διαστήματα (space)

Οι καρδιές κατανέμονται ομοιόμορφα με διαστήματα:

<img id="image" src="image.jpg"> #image { width: 500px; height: 281px; mask-image: url("heart.svg"); mask-size: 80px; mask-repeat: space; }

:

Παράδειγμα . Κλιμακούμενη επανάληψη (round)

Οι καρδιές κλιμακώνονται για ομοιόμορφη πλήρωση:

<img id="image" src="image.jpg"> #image { width: 500px; height: 281px; mask-image: url("heart.svg"); mask-size: 80px; mask-repeat: round; }

:

Δείτε επίσης

  • ιδιότητα mask-size,
    καθορίζει το μέγεθος της μάσκας
  • ιδιότητα mask-position,
    ορίζει τη θέση της μάσκας
  • ιδιότητα mask,
    συντομογραφία για όλες τις ιδιότητες μάσκας
Ελληνικά
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Χρησιμοποιούμε cookie για τη λειτουργία του ιστότοπου, την ανάλυση και την εξατομίκευση. Η επεξεργασία των δεδομένων γίνεται σύμφωνα με την Πολιτική Απορρήτου.
αποδοχή όλων ρύθμιση απόρριψη