backdrop-filter: sepia()

Примеры

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

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

backdrop-sepia-0

backdrop-sepia-50

backdrop-sepia

<div class="bg-[url(/img/mountains.jpg)]">  <div class="bg-white/30 backdrop-sepia-0 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]">  <div class="bg-white/30 backdrop-sepia-50 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]">  <div class="bg-white/30 backdrop-sepia ..."></div></div>

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

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

<div class="backdrop-sepia-[.25] ...">  <!-- ... --></div>

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

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

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

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

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

<div class="backdrop-sepia md:backdrop-sepia-0 ...">  <!-- ... --></div>

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