CSS-свойство `-webkit-mask-position-x`

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

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

Синтаксис

/* Keyword values */
-webkit-mask-position-x: left;
-webkit-mask-position-x: center;
-webkit-mask-position-x: right;

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

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

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

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

Значения

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

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

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

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

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

-webkit-mask-position-x = [ <length-percentage> | left | center | right ]#

Примеры

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

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

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

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

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

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`-webkit-mask-position-x`	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-x