Тип маски

mask-type

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

Классы

Класс Значение
mask-type-alpha mask-mode: alpha;
mask-type-luminance mask-mode: luminance;

Описание

Адаптивный модификатор. Задает поведение фонового изображения при прокрутке в зависимости от размера области просмотра.

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • mask-type-alpha - для наложения маски используется альфа;
    • mask-type-luminance - для наложения маски использоуется яркость;

mask-type-alpha

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

<div class="mask-type-alpha"</div>

mask-type-luminance

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

<div class="mask-type-luminance"</div>

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

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

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

<div class="md:mask-type-alpha"></div>

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

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