mask-position

Базовая линия 2023

Новое

С декабря 2023 года эта функция работает на последних устройствах и версиях браузеров. Эта функция может не работать на более старых устройствах или браузерах.

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

Синтаксис

/* Keyword values */
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

/* <position> values */
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;

/* Multiple values */
mask-position: top right;
mask-position:
  1rem 1rem,
  center;

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

Одно или несколько <position> значений, разделенных запятыми.

Значения

<position>: От одного до четырёх значений, представляющих 2D-положение относительно границ области элемента. Могут быть указаны относительные или абсолютные смещения. Обратите внимание, что положение может быть установлено за пределами области элемента.

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

Начальное значение	`0% 0%`
Применяется к	всем элементам; В SVG, оно применяется к контейнерным элементам, за исключением элемента `<defs>` и всех графических элементов
Наследуется	нет
Проценты	относятся к размеру области рисования маски минус размер изображения слоя маски (см. текст для `background-position`)
Вычисленное значение	Состоит из двух ключевых слов, представляющих начало и двух смещений от этого начала, каждое задаётся как абсолютная длина (если задана <length>), иначе как процент.
Тип анимации	повторяющийся список

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

mask-position = 
  <position>#  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Установка положения маски

Нажмите «Воспроизвести» в примере, чтобы открыть код в MDN Playground и изменить значение mask-position на любое из разрешённых значений, описанных выше.

<div id="wrapper">
  <div class="masked"></div>
</div>

#wrapper {
  border: 1px solid black;
  width: 250px;
  height: 250px;
}

.masked {
  width: 250px;
  height: 250px;
  margin-bottom: 10px;
  background: blue linear-gradient(red, blue);

  mask-image: url(https://mdn.github.io/shared-assets/images/examples/mask-star.svg);
  mask-repeat: no-repeat;
  mask-position: top right;
}

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

Спецификация
CSS Masking Module Level 1 # the-mask-position

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`mask-position`	1201	1207918–79	53	10615	15.43.1	12018	53	8014	15.42	25.01.0	2

См. также

Обрезка и маскирование в CSS

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