CSS mask-repeat
La proprietà CSS3 mask-repeat definisce come viene ripetuta l'immagine maschera
La proprietà mask-repeat in CSS3 consente di specificare la modalità di ripetizione dell'immagine maschera applicata a un elemento. Si può scegliere di ripetere la maschera in orizzontale, verticale, entrambe le direzioni, o di non ripeterla affatto, oltre a modalità avanzate come space e round.
Sintassi
mask-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round;
Significato dei valori principali:
- repeat: ripete la maschera sia in orizzontale che in verticale (valore predefinito).
- repeat-x: ripete la maschera solo orizzontalmente.
- repeat-y: ripete la maschera solo verticalmente.
- no-repeat: non ripete la maschera, viene mostrata una sola volta.
- space: ripete la maschera, distribuendo lo spazio extra tra le copie senza sovrapposizioni.
- round: ripete la maschera adattandola per riempire lo spazio senza ritagliarla.
Esempio proprietà: mask-repeat
Codice Esempio: mask-repeat
CODE: CSS
.mask-repeat-box {
width: 220px;
height: 220px;
margin: 15px;
background-color: #ff6f61;
color: white;
font-weight: bold;
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
mask-image: radial-gradient(circle 15px, black 90%, transparent 100%);
mask-position: center;
mask-size: 40px 40px;
-webkit-mask-image: radial-gradient(circle 15px, black 90%, transparent 100%);
-webkit-mask-position: center;
-webkit-mask-size: 40px 40px;
}.repeat {
mask-repeat: repeat;
-webkit-mask-repeat: repeat;
}.repeat-x {
mask-repeat: repeat-x;
-webkit-mask-repeat: repeat-x;
}.repeat-y {
mask-repeat: repeat-y;
-webkit-mask-repeat: repeat-y;
}.no-repeat {
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
}.space {
mask-repeat: space;
-webkit-mask-repeat: space;
}.round {
mask-repeat: round;
-webkit-mask-repeat: round;
}
Contenuto Esempio: mask-repeat
Esempio di utilizzo di mask-repeat
In questo esempio, un elemento ha una maschera con un motivo a cerchi che viene ripetuta in modi diversi tramite la proprietà mask-repeat.
repeat
repeat-x
repeat-y
no-repeat
space
round
CSS e HTML per l'elemento con mask-repeat:
<style>
.mask-repeat-box {
width: 220px;
height: 220px;
margin: 15px;
background-color: #ff6f61;
color: white;
font-weight: bold;
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
mask-image: radial-gradient(circle 15px, black 90%, transparent 100%);
mask-position: center;
mask-size: 40px 40px;
-webkit-mask-image: radial-gradient(circle 15px, black 90%, transparent 100%);
-webkit-mask-position: center;
-webkit-mask-size: 40px 40%;
}
.repeat {
mask-repeat: repeat;
-webkit-mask-repeat: repeat;
}
.repeat-x {
mask-repeat: repeat-x;
-webkit-mask-repeat: repeat-x;
}
.repeat-y {
mask-repeat: repeat-y;
-webkit-mask-repeat: repeat-y;
}
.no-repeat {
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
}
.space {
mask-repeat: space;
-webkit-mask-repeat: space;
}
.round {
mask-repeat: round;
-webkit-mask-repeat: round;
}
</style>
<div>
<div class="mask-repeat-box repeat">repeat</div>
<div class="mask-repeat-box repeat-x">repeat-x</div>
<div class="mask-repeat-box repeat-y">repeat-y</div>
<div class="mask-repeat-box no-repeat">no-repeat</div>
<div class="mask-repeat-box space">space</div>
<div class="mask-repeat-box round">round</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
