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