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