1. Фильтры
  2. saturate

Фильтры

backdrop-filter: saturate()

Утилиты для применения фильтров насыщенности к фону элемента.

ClassStyles
backdrop-saturate-<number>
backdrop-filter: saturate(<number>%);
backdrop-saturate-(<custom-property>)
backdrop-filter: saturate(var(<custom-property>));
backdrop-saturate-[<value>]
backdrop-filter: saturate(<value>);

Примеры

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

Используйте утилиты вроде backdrop-saturate-50 и backdrop-saturate-100 для управления насыщенностью фона элемента:

backdrop-saturate-50

backdrop-saturate-125

backdrop-saturate-200

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

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

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

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

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

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

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

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

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

<div class="backdrop-saturate-50 md:backdrop-saturate-150 ...">  <!-- ... --></div>

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

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков