Фильтры
backdrop-filter: invert()
Утилиты для применения фильтров инверсии к фону элемента.
| Class | Styles |
|---|---|
backdrop-invert | backdrop-filter: invert(100%); |
backdrop-invert-<number> | backdrop-filter: invert(<number>%); |
backdrop-invert-(<custom-property>) | backdrop-filter: invert(var(<custom-property>)) |
backdrop-invert-[<value>] | backdrop-filter: invert(<value>); |
Примеры
Базовый пример
Используйте утилиты вроде backdrop-invert и backdrop-invert-65 для управления инверсией цвета фона элемента:
backdrop-invert-0
backdrop-invert-65
backdrop-invert
<div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert-0 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert-65 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert ..."></div></div>Использование пользовательского значения
Используйте синтаксис backdrop-invert-[<value>] , чтобы задать backdrop inversion на основе полностью пользовательского значения:
<div class="backdrop-invert-[.25] ..."> <!-- ... --></div>Для переменных CSS вы также можете использовать синтаксис: backdrop-invert-(<custom-property>)
<div class="backdrop-invert-(--my-backdrop-inversion) ..."> <!-- ... --></div>Это просто сокращение, backdrop-invert-[var(<custom-property>)] которое автоматически добавляет функцию var().
Адаптивный дизайн
Префикс a backdrop-filter: invert() утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="backdrop-invert-0 md:backdrop-invert ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.