Vlastnost mask-repeat
Vlastnost mask-repeat určuje způsob opakování masky, pokud jsou její rozměry menší než rozměry prvku.
Funguje podobně jako background-repeat,
ale aplikuje se na masky.
Syntaxe
selektor {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Hodnoty
| Hodnota | Popis |
|---|---|
repeat |
Maska se opakuje podél obou os (výchozí). |
no-repeat |
Maska se neopakuje. |
repeat-x |
Maska se opakuje pouze vodorovně. |
repeat-y |
Maska se opakuje pouze svisle. |
space |
Maska se opakuje se stejnými mezerami. |
round |
Maska se škáluje pro rovnoměrné vyplnění. |
Příklad . Bez opakování (no-repeat)
Jedno srdíčko uprostřed bez opakování:
<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říklad . Opakování vodorovně (repeat-x)
Srdíčka se opakují pouze vodorovně:
<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říklad . Opakování svisle (repeat-y)
Srdíčka se opakují pouze svisle:
<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říklad . Opakování s mezerami (space)
Srdíčka jsou rovnoměrně rozložena s mezerami:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Příklad . Škálované opakování (round)
Srdíčka se škálují pro rovnoměrné vyplnění:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Viz také
-
vlastnost
mask-size,
určuje velikost masky -
vlastnost
mask-position,
nastavuje pozici masky -
vlastnost
mask,
zkrácený zápis pro všechny vlastnosti maskování
