Savybė mask-repeat
Savybė mask-repeat nurodo kaip kartoti kaukę, jei jos matmenys yra mažesni nei elemento matmenys.
Veikia panašiai kaip background-repeat,
bet taikoma kaukėms.
Sintaksė
selektorius {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Reikšmės
| Reikšmė | Aprašas |
|---|---|
repeat |
Kaukė kartojama abiejomis ašimis (numatytoji reikšmė). |
no-repeat |
Kaukė nekartojama. |
repeat-x |
Kaukė kartojama tik horizontaliai. |
repeat-y |
Kaukė kartojama tik vertikaliai. |
space |
Kaukė kartojama su vienodais tarpais. |
round |
Kaukė keičia savo dydį, kad tolygiai užpildytų erdvę. |
Pavyzdys . Be kartojimo (no-repeat)
Viena širdelė centre be kartojimo:
<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;
}
:
Pavyzdys . Kartojimas horizontaliai (repeat-x)
Širdelės kartojamos tik horizontaliai:
<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;
}
:
Pavyzdys . Kartojimas vertikaliai (repeat-y)
Širdelės kartojamos tik vertikaliai:
<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;
}
:
Pavyzdys . Kartojimas su tarpais (space)
Širdelės tolygiai paskirstytos su tarpais:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Pavyzdys . Keičiamo dydžio kartojimas (round)
Širdelės keičia savo dydį, kad tolygiai užpildytų erdvę:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Taip pat žiūrėkite
-
savybė
mask-size,
nustato kaukės dydį -
savybė
mask-position,
nustato kaukės padėtį -
savybė
mask,
trumpinys visoms kaukių savybėms
