mask-repeat

Baseline 2023

Новое

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

Свойство mask-repeat CSS задаёт, как повторяются изображения маски. Изображение маски может повторяться по горизонтальной оси, по вертикальной оси, по обеим осям или вообще не повторяться.

По умолчанию повторяемые изображения обрезаются до размера элемента, но они могут быть масштабированы для подгонки (используя round) или равномерно распределены от края до края (используя space).

Синтаксис

/* One-value syntax */
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

/* Two-value syntax: horizontal | vertical */
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

/* Multiple values */
mask-repeat:
  space round,
  no-repeat;
mask-repeat:
  round repeat,
  space,
  repeat-x;

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

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

Значения

<repeat-style>

Синтаксис с одним значением является сокращённым вариантом полного синтаксиса с двумя значениями:

Одно значение	Эквивалент с двумя значениями
`repeat-x`	`repeat no-repeat`
`repeat-y`	`no-repeat repeat`
`repeat`	`repeat repeat`
`space`	`space space`
`round`	`round round`
`no-repeat`	`no-repeat no-repeat`

В синтаксисе с двумя значениями первое значение представляет поведение горизонтального повторения, а второе — вертикального. Вот объяснение работы каждого варианта для каждого направления:

`repeat`	Изображение повторяется столько раз, сколько необходимо для заполнения всей области рисования маски. Последнее изображение будет обрезано, если оно не помещается.
`space`	Изображение повторяется по возможности без обрезки. Первое и последнее изображения закрепляются по обеим сторонам элемента, а пробелы равномерно распределяются между изображениями. Свойство `mask-position` игнорируется, если без обрезки можно отобразить только одно изображение. Единственный случай, когда происходит обрезка при использовании `space`, — это когда нет места для отображения одного изображения.
`round`	По мере увеличения разрешённого пространства повторяемые изображения будут растягиваться (без пробелов) до тех пор, пока не будет места для добавления другого. При добавлении следующего изображения все текущие сжимаются, чтобы освободить место. Пример: изображение с исходной шириной 260 пикселей, повторяемое три раза, может растянуться до тех пор, пока каждая копия не станет 300 пикселей в ширину, и тогда будет добавлено ещё одно изображение. Затем они сжимаются до 225 пикселей.
`no-repeat`	Изображение не повторяется (и, следовательно, область рисования маски не обязательно будет полностью покрыта). Положение не повторяющегося изображения маски определяется свойством CSS `mask-position`.

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

Начальное значение	`repeat`
Применяется к	всем элементам; в SVG она применяется к контейнерным элементам, за исключением элемента `<defs>` и всех графических элементов
Наследуется	нет
Вычисленное значение	Состоит из двух ключевых слов, по одному на каждую размерность
Тип анимации	дискретный

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

mask-repeat = 
  <repeat-style>#  

<repeat-style> = 
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

Примеры

Указание повторения для одной маски

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

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

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

Поддержка нескольких изображений маски

Вы можете указать разное <repeat-style> для каждого изображения маски, разделяя их запятыми:

.example-three {
  mask-image: url("mask1.png"), url("mask2.png");
  mask-repeat: repeat-x, repeat-y;
}

Каждое изображение сопоставляется с соответствующим стилем повторения, от первого до последнего.

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

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

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`mask-repeat`	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-repeat