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

Свойство -webkit-mask-repeat-y задаёт, повторяется ли изображение маски (мозаично) по вертикали и каким образом.

Синтаксис

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

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

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

Значения

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

repeat

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

no-repeat

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

space

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

round

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

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

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

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

Примеры

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

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

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

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

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

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

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

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

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

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

См. также

• -webkit-mask-repeat
• -webkit-mask-repeat-x