1. Эффекты
  2. opacity

Эффекты

opacity

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

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

Примеры

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

Используйте утилиты opacity-<number> такие как opacity-25 и opacity-100 для установки прозрачности элемента:

opacity-100

opacity-75

opacity-50

opacity-25

<button class="bg-indigo-500 opacity-100 ..."></button><button class="bg-indigo-500 opacity-75 ..."></button><button class="bg-indigo-500 opacity-50 ..."></button><button class="bg-indigo-500 opacity-25 ..."></button>

Применение условно

Префикс an opacity утилиты с вариантом, например disabled:*, чтобы применить утилиту только в этом состоянии:

<input class="opacity-100 disabled:opacity-75 ..." type="text" />

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

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

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

<button class="opacity-[.67] ...">  <!-- ... --></button>

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

<button class="opacity-(--my-opacity) ...">  <!-- ... --></button>

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

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

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

<button class="opacity-50 md:opacity-100 ...">  <!-- ... --></button>

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

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