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

Фильтры

backdrop-filter: opacity()

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

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

Примеры

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

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

backdrop-opacity-10

backdrop-opacity-60

backdrop-opacity-95

<div class="bg-[url(/img/mountains.jpg)]">  <div class="bg-white/30 backdrop-invert backdrop-opacity-10 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]">  <div class="bg-white/30 backdrop-invert backdrop-opacity-60 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]">  <div class="bg-white/30 backdrop-invert backdrop-opacity-95 ..."></div></div>

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

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

<div class="backdrop-opacity-[.15] ...">  <!-- ... --></div>

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

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

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

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

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

<div class="backdrop-opacity-100 md:backdrop-opacity-60 ...">  <!-- ... --></div>

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

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