CSS свойство mask-repeat

Предыдущая страница mask-position
Следующая страница mask-size

Определение и использование

mask-repeat Параметр устанавливает, будет ли изображение маски повторяться и как.

По умолчанию, изображение маски будет повторяться в вертикальном и горизонтальном направлениях.

пример

пример 1

использование mask-repeat: no-repeat; и mask-repeat: repeat;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: repeat;
}

Попробуйте сами

пример 2

использование mask-repeat: round; и mask-repeat: space;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

Попробуйте сами

пример 3

использование mask-repeat: repeat-x; и mask-repeat: repeat-y;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

Попробуйте сами

CSS грамматика

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

Значение атрибута

Значение	Описание
repeat	Изображение маски будет повторяться в вертикальном и горизонтальном направлениях. Если последнее изображение не подходит, оно будет обрезано. Это значение по умолчанию.
repeat-x	Изображение маски будет повторяться только в горизонтальном направлении.
repeat-y	Изображение маски будет повторяться только в вертикальном направлении.
space	Изображение маски будет повторяться как можно больше без обрезки. Первое и последнее изображения фиксированы по сторонам элемента, а пустое пространство между изображениями распределяется равномерно.
round	Изображение маски будет повторяться и сжиматься или растягиваться, чтобы заполнить пространство (без зазоров).
no-repeat	Изображение маски не повторяется. Изображение будет отображаться только один раз.
initial	Установить этот атрибут в его значение по умолчанию. См. также initial.
inherit	Ингерит этот атрибут от родительского элемента. См. также inherit.

Технические детали

Значение по умолчанию:	repeat
Ингерит:	Нет
Создание анимации:	Не поддерживается. См. также:Свойства анимации.
Версия:	Модуль маскирования CSS уровня 1
JavaScript грамматика:	object.style.maskRepeat="no-repeat"