Vlastnost mask-position
Vlastnost mask-position nastavuje počáteční pozici masky vzhledem k prvku.
Funguje podobně jako background-position, ale aplikuje se na masky.
Syntaxe
selektor {
mask-position: <position>;
}
Hodnoty
| Hodnota | Popis |
|---|---|
top left |
V levém horním rohu (ve výchozím nastavení). |
center |
Na středu prvku. |
50% 50% |
Stejně jako center. |
right bottom |
V pravém dolním rohu. |
100px 200px |
Konkrétní souřadnice v pixelech. |
Příklad . Centrování masky
Masku-srdíčko na středu obrázku:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Příklad . Levý horní roh
Masku v levém horním rohu:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Příklad . Pravý dolní roh
Masku v pravém dolním rohu:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Příklad . Přesné souřadnice
Masku je pozicována podle přesných souřadnic:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Příklad . Procentuální pozicování
Pozicování masky pomocí procent:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Viz také
-
vlastnost
mask-size,
určuje velikost masky -
vlastnost
mask-origin,
určuje počáteční bod pro pozicování -
vlastnost
mask,
zkrácený zápis pro všechny vlastnosti maskování
