Proprietà mask-repeat
La proprietà mask-repeat definisce il modo in cui una maschera si ripete se le sue dimensioni sono inferiori a quelle dell'elemento.
Funziona in modo simile a background-repeat,
ma viene applicata alle maschere.
Sintassi
selettore {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Valori
| Valore | Descrizione |
|---|---|
repeat |
La maschera si ripete lungo entrambi gli assi (predefinito). |
no-repeat |
La maschera non si ripete. |
repeat-x |
La maschera si ripete solo orizzontalmente. |
repeat-y |
La maschera si ripete solo verticalmente. |
space |
La maschera si ripete con spaziature uniformi. |
round |
La maschera viene ridimensionata per riempire l'area in modo uniforme. |
Esempio . Senza ripetizione (no-repeat)
Un singolo cuore al centro, senza ripetizione:
<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;
}
:
Esempio . Ripetizione orizzontale (repeat-x)
I cuori si ripetono solo orizzontalmente:
<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;
}
:
Esempio . Ripetizione verticale (repeat-y)
I cuori si ripetono solo verticalmente:
<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;
}
:
Esempio . Ripetizione con spaziatura (space)
I cuori sono distribuiti uniformemente con spaziature:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Esempio . Ripetizione con ridimensionamento (round)
I cuori vengono ridimensionati per riempire l'area in modo uniforme:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Vedi anche
-
proprietà
mask-size,
definisce le dimensioni della maschera -
proprietà
mask-position,
imposta la posizione della maschera -
proprietà
mask,
scorciatoia per tutte le proprietà di mascheratura
