Повтор маски

mask-repeat

В SIMAI Framework с помощью модифкаторов можно управлять повтором маски.

Классы

Класс Значение
mask-repeat mask-repeat: repeat;
mask-repeat-none mask-repeat: no-repeat;
mask-repeat-x mask-repeat: repeat-x;
mask-repeat-y mask-repeat: repeat-y;
mask-repeat-round mask-repeat: round;
mask-repeat-space mask-repeat: space;

Описание

Адаптивный модификатор. Задаетобласть позиционирование фона в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • mask-repeat - для повторения маски;
    • mask-repeat-none - для размещения маски без повторения;
    • mask-repeat-x - для размещения маски с повторением по оси X;
    • mask-repeat-y - для размещения маски с повторением по оси Y;
    • mask-repeat-round - для повторения маски таким образом чтобы покрыть всю область целыми изображениями маски с возможным искажением пропорций изображения маски;
    • mask-repeat-space - для повторения маски таким образом чтобы максимально закрыть целыми изображениями маски без искажения пропорций но с остаточными промежутками между ними;

mask-repeat

Используйте модификатор mask-repeat для повторения маски.

<div class="mask-repeat"></div>

mask-repeat-none

Используйте модификатор mask-repeat-none для размещения маски без повторения.

<div class="mask-repeat-none"></div>

mask-repeat-x

Используйте модификатор mask-repeat-x для размещения маски с повторением по оси X.

<div class="mask-repeat-x"></div>

mask-repeat-y

Используйте модификатор mask-repeat-y для размещения маски с повторением по оси Y.

<div class="mask-repeat-y"></div>

mask-repeat-round

Используйте модификатор mask-repeat-round для повторения маски таким образом чтобы покрыть всю область целыми изображениями маски с возможным искажением пропорций изображения маски.

<div class="mask-repeat-round"></div>

mask-repeat-space

Используйте модификатор mask-repeat-space для повторения маски таким образом чтобы максимально закрыть целыми изображениями маски без искажения пропорций но с остаточными промежутками между ними.

<div class="mask-repeat-space"></div>

Адаптивность

Для управления повтором маски, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.

Например, используйте модификатор md:mask-center для повтора маски для экранов размером Medium и больше.

<div class="md:mask-repeat"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью