Proprietatea mask-repeat
Proprietatea mask-repeat stabilește modul de repetare a măștii dacă dimensiunile ei sunt mai mici decât dimensiunile elementului.
Funcționează similar cu background-repeat,
dar se aplică la măști.
Sintaxă
selector {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Valori
| Valoare | Descriere |
|---|---|
repeat |
Masca se repetă pe ambele axe (implicit). |
no-repeat |
Masca nu se repetă. |
repeat-x |
Masca se repetă doar orizontal. |
repeat-y |
Masca se repetă doar vertical. |
space |
Masca se repetă cu spații egale. |
round |
Masca este scalată pentru a umple uniform. |
Exemplu . Fără repetare (no-repeat)
Un singur inimioară în centru fără repetare:
<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;
}
:
Exemplu . Repetare orizontală (repeat-x)
Inimioarele se repetă doar orizontal:
<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;
}
:
Exemplu . Repetare verticală (repeat-y)
Inimioarele se repetă doar vertical:
<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;
}
:
Exemplu . Repetare cu spații (space)
Inimioarele sunt distribuite uniform cu spații:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Exemplu . Repetare cu scalare (round)
Inimioarele sunt scalate pentru a umple uniform:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Vezi și
-
proprietatea
mask-size,
determină dimensiunea măștii -
proprietatea
mask-position,
stabilește poziția măștii -
proprietatea
mask,
prescurtare pentru toate proprietățile de mascare
