Свойство CSS `-webkit-mask-position-y`

Нестандартное: Эта функция не является стандартной и не входит в процесс стандартизации. Не используйте её на веб-сайтах для пользователей: она может работать не у всех. Кроме того, между реализациями могут быть значительные различия, а поведение может измениться в будущем.

Свойство CSS -webkit-mask-position-y задаёт начальное вертикальное положение изображения маски.

Синтаксис

/* Keyword values */
-webkit-mask-position-y: top;
-webkit-mask-position-y: center;
-webkit-mask-position-y: bottom;

/* <percentage> values */
-webkit-mask-position-y: 100%;
-webkit-mask-position-y: -50%;

/* <length> values */
-webkit-mask-position-y: 50px;
-webkit-mask-position-y: -1cm;

/* Multiple values */
-webkit-mask-position-y:
  50px,
  25%,
  -3em;

/* Global values */
-webkit-mask-position-y: inherit;
-webkit-mask-position-y: initial;
-webkit-mask-position-y: revert;
-webkit-mask-position-y: revert-layer;
-webkit-mask-position-y: unset;

Значения

Это свойство задаётся одним или несколькими значениями, разделёнными запятыми:

<length-percentage>: Длина, указывающая положение верхней стороны изображения относительно верхнего края внутреннего отступа блока. Проценты вычисляются относительно вертикального размера области внутренних отступов блока. Значение 0% означает, что верхний край изображения выровнен по верхнему краю внутреннего отступа блока, а значение 100% — что нижний край изображения выровнен по нижнему краю внутреннего отступа блока.
top: Эквивалентно 0%.
bottom: Эквивалентно 100%.
center: Эквивалентно 50%.

Формальное определение

Начальное значение	0%
Применяется к	всем элементам
Наследуется	нет
Проценты	относятся к размеру самого блока
Вычисленное значение	для `<length>` — абсолютное значение, в противном случае — процент
Тип анимации	дискретный

Формальный синтаксис

-webkit-mask-position-y = [ <length-percentage> | top | center | bottom ]#

Примеры

Вертикальное позиционирование изображения маски

.exampleOne {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-position-y: bottom;
}

.exampleTwo {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-position-y: 25%;
}

Спецификации

Не входит ни в один стандарт.

Совместимость с браузерами

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`-webkit-mask-position-y`	1	18	49	15	3.1	18	49	14	2	1.0	2	2

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-mask-position-y