Композиция маски
mask-composite
В SIMAI Framework с помощью модифкаторов можно создавать многослойные маски, объединив их.
Классы
| Класс | Значение |
|---|---|
mask-add |
mask-composite: add; |
mask-subtract |
mask-composite: subtract; |
mask-intersect |
mask-composite: intersect; |
mask-exclude |
mask-composite: exclude; |
Описание
Адаптивный модификатор. Задает поведение фонового изображения при прокрутке в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
mask-add- текущий слой маски (размещенный первым) отображается под нижним слоем;mask-subtract- отображаются только части текущего слоя маски за пределами нижних слоя;mask-intersect- текущий слой отображается только при пересечении с нижним слоем;mask-exclude- отображается комбинация из непересекающихся частей текущего и нижних слоев;
mask-add
Используйте модификатор mask-add текущий слой маски (размещенный первым) отображается под нижним слоем.
<div class="mask-add"</div>mask-subtract
Используйте модификатор mask-subtract отображаются только части текущего слоя маски за пределами нижних слоя.
<div class="mask-subtract"</div>mask-intersect
Используйте модификатор mask-intersect текущий слой отображается только при пересечении с нижним слоем.
<div class="mask-intersect"</div>mask-exclude
Используйте модификатор mask-exclude отображается комбинация из непересекающихся частей текущего и нижних слоев.
<div class="mask-exclude"</div>Адаптивность
Для управления поведения фонового изображения при прокрутке, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору выравнивания элементов флексбокса по основной оси.
Например, используйте модификатор md:mask-add для фиксации фонового изображения относительно области просмотра для экранов размером Medium и больше.
<div class="md:mask-add"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.