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

Свойство -webkit-mask-repeat-x указывает, повторяется ли изображение маски (замощается) по горизонтали и каким образом.

Синтаксис

/* Keyword values */
-webkit-mask-repeat-x: repeat;
-webkit-mask-repeat-x: no-repeat;
-webkit-mask-repeat-x: space;
-webkit-mask-repeat-x: round;

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

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

Значения

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

repeat

Изображение маски повторяется по горизонтали и вертикали.

no-repeat

Изображение маски не повторяется по горизонтали; в этом направлении отрисовывается только одна копия изображения маски. Остальное содержимое маскируемого элемента не отображается.

space

Изображение повторяется столько раз, сколько возможно, без обрезки. Первое и последнее изображения прижимаются к краям элемента, а свободное пространство равномерно распределяется между изображениями. Свойство mask-position игнорируется, если без обрезки можно отобразить только одно изображение. При использовании значения space обрезка происходит только в том случае, если места недостаточно для отображения одного изображения.

round

По мере увеличения доступного пространства повторяющиеся изображения растягиваются (без промежутков), пока не появится место для добавления ещё одного. Когда добавляется следующее изображение, все текущие изображения сжимаются, чтобы освободить для него место. Пример: изображение исходной шириной 260px, повторённое три раза, может растянуться так, что ширина каждого повторения составит 300px, после чего будет добавлено ещё одно изображение. Затем ширина каждого изображения уменьшится до 225px.

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

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

-webkit-mask-repeat-x = [ repeat | no-repeat | space | round ]#

Примеры

Использование повторяющегося или неповторяющегося изображения маски

.example-one {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-x: repeat;
}

.example-two {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-x: no-repeat;
}

Использование нескольких изображений маски

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

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

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

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

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

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

См. также

• -webkit-mask-repeat
• -webkit-mask-repeat-y