⌘K

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

cssselektor {
  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: 

html<img id="image" src="image.jpg">
css#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: 

html<img id="image" src="image.jpg">
css#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: 

html<img id="image" src="image.jpg">
css#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: 

html<img id="image" src="image.jpg">
css#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: 

html<img id="image" src="image.jpg">
css#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í
BackVlastnost maskNextVlastnost mask-image