backdrop-filter

Примеры

Базовый пример

Используйте утилиты вроде backdrop-blur-xs и backdrop-grayscale для применения фильтров к фону элемента:

backdrop-blur-xs

backdrop-grayscale

комбинированный

<div class="bg-[url(/img/mountains.jpg)] ...">  <div class="backdrop-blur-xs ..."></div></div><div class="bg-[url(/img/mountains.jpg)] ...">  <div class="backdrop-grayscale ..."></div></div><div class="bg-[url(/img/mountains.jpg)] ...">  <div class="backdrop-blur-xs backdrop-grayscale ..."></div></div>

Вы можете комбинировать следующие утилиты фильтров фона: размытие, яркость, контрастность, оттенки серого, поворот оттенка, инверсия, прозрачность, насыщенность и сепия.

Удаление фильтров

Используйте утилиту backdrop-filter-none для удаления всех фильтров фона, применённых к элементу:

<div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none"></div>

Использование пользовательского значения

Используйте синтаксис backdrop-filter-[<value>] , чтобы задать backdrop filter на основе полностью пользовательского значения:

<div class="backdrop-filter-[url('filters.svg#filter-id')] ...">  <!-- ... --></div>

Для переменных CSS вы также можете использовать синтаксис: backdrop-filter-(<custom-property>)

<div class="backdrop-filter-(--my-backdrop-filter) ...">  <!-- ... --></div>

Это просто сокращение, backdrop-filter-[var(<custom-property>)] которое автоматически добавляет функцию var().

Применение при наведении

Префикс a backdrop-filter утилиты с вариантом, например hover:*, чтобы применить утилиту только в этом состоянии:

<div class="backdrop-blur-sm hover:backdrop-filter-none ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.

Адаптивный дизайн

Префикс a backdrop-filter утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="backdrop-blur-sm md:backdrop-filter-none ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.