A mask-repeat tulajdonság
A mask-repeat tulajdonság határozza meg, hogy a maszk hogyan ismétlődjön, ha mérete kisebb, mint az elem mérete.
Hasonlóan működik, mint a background-repeat,
de maszkokra vonatkozik.
Szintaxis
szelektor {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Értékek
| Érték | Leírás |
|---|---|
repeat |
A maszk mindkét tengely mentén ismétlődik (alapértelmezett). |
no-repeat |
A maszk nem ismétlődik. |
repeat-x |
A maszk csak vízszintesen ismétlődik. |
repeat-y |
A maszk csak függőlegesen ismétlődik. |
space |
A maszk egyenlő távolságokkal ismétlődik. |
round |
A maszk méretezve van az egyenletes kitöltés érdekében. |
Példa . Ismétlés nélkül (no-repeat)
Egyetlen szív a középen, ismétlés nélkül:
<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;
}
:
Példa . Vízszintes ismétlés (repeat-x)
A szívek csak vízszintesen ismétlődnek:
<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;
}
:
Példa . Függőleges ismétlés (repeat-y)
A szívek csak függőlegesen ismétlődnek:
<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;
}
:
Példa . Ismétlés hézagokkal (space)
A szívek egyenletesen elosztva, hézagokkal:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Példa . Méretezhető ismétlés (round)
A szívek méretezve vannak az egyenletes kitöltés érdekében:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Lásd még
-
a
mask-sizetulajdonság,
meghatározza a maszk méretét -
a
mask-positiontulajdonság,
beállítja a maszk elhelyezését -
a
masktulajdonság,
rövidítés az összes maszkolási tulajdonságra
