Īpašība mask-repeat
Īpašība mask-repeat norāda maskas atkārtošanās veidu, ja tās izmēri ir mazāki par elementa izmēriem.
Darbojas līdzīgi kā background-repeat,
bet tiek piemērota maskām.
Sintakse
selector {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Vērtības
| Vērtība | Apraksts |
|---|---|
repeat |
Maska atkārtojas pa abām asīm (pēc noklusējuma). |
no-repeat |
Maska neatkārtojas. |
repeat-x |
Maska atkārtojas tikai horizontāli. |
repeat-y |
Maska atkārtojas tikai vertikāli. |
space |
Maska atkārtojas ar vienādiem atstarpēm. |
round |
Maskas izmērs tiek mērogots, lai vienmērīgi aizpildītu. |
Piemērs . Bez atkārtošanas (no-repeat)
Viena sirsniņa centrā bez atkārtošanas:
<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;
}
:
Piemērs . Atkārtošanās horizontāli (repeat-x)
Sirsniņas atkārtojas tikai horizontāli:
<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;
}
:
Piemērs . Atkārtošanās vertikāli (repeat-y)
Sirsniņas atkārtojas tikai vertikāli:
<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;
}
:
Piemērs . Atkārtošanās ar atstarpēm (space)
Sirsniņas vienmērīgi izvietotas ar atstarpēm:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Piemērs . Mērogojama atkārtošanās (round)
Sirsniņas tiek mērogotas, lai vienmērīgi aizpildītu:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Skatiet arī
-
īpašība
mask-size,
norāda maskas izmēru -
īpašība
mask-position,
iestata maskas novietojumu -
īpašība
mask,
saīsinājums visām maskēšanas īpašībām
