Инвертирование цвета фона элемента
backdrop-filter-invert
sm
md
lg
xl
hover
В SIMAI Framework с помощью модификатора можно управлять инвертированием цвета элемента фона.
Классы
| Класс | Значение |
|---|---|
invert-backdrop-invert-none |
backdrop-filter: invert(0) |
invert-backdrop-invert |
backdrop-filter: invert(1) |
Описание
Адаптивный модификатор. Позволяет управлять инвертированием цвета фона элемента, в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
backdrop-invert-none...backdrop-invert- инвертирование цвета фона элемента.
Пример
<div class="backdrop-invert-none"><!-- ... --></div>
<div class="backdrop-invert"><!-- ... --></div>
Адаптивность
Для установки инвертирования цвета фона элементов, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору контрастности.
Например, используйте модификатор md:backdrop-invert для установки инвертирования цвета элементов для экранов размером Medium и больше.
<div class="md:backdrop-invert"></div>Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.