1. Эффекты
  2. mix-blend-mode

Эффекты

mix-blend-mode

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

ClassStyles
mix-blend-normal
mix-blend-mode: normal;
mix-blend-multiply
mix-blend-mode: multiply;
mix-blend-screen
mix-blend-mode: screen;
mix-blend-overlay
mix-blend-mode: overlay;
mix-blend-darken
mix-blend-mode: darken;
mix-blend-lighten
mix-blend-mode: lighten;
mix-blend-color-dodge
mix-blend-mode: color-dodge;
mix-blend-color-burn
mix-blend-mode: color-burn;
mix-blend-hard-light
mix-blend-mode: hard-light;
mix-blend-soft-light
mix-blend-mode: soft-light;

Примеры

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

Используйте утилиты такие как mix-blend-overlay и mix-blend-soft-light для управления тем, как содержимое и фон элемента смешиваются с другим содержимым в том же контексте наложения:

<div class="flex justify-center -space-x-14">  <div class="bg-blue-500 mix-blend-multiply ..."></div>  <div class="bg-pink-500 mix-blend-multiply ..."></div></div>

Изоляция смешивания

Используйте утилиту isolate на родительском элементе для создания нового контекста наложения и предотвращения смешивания с содержимым позади него:

<div class="isolate flex justify-center -space-x-14">  <div class="bg-yellow-500 mix-blend-multiply ..."></div>  <div class="bg-green-500 mix-blend-multiply ..."></div></div><div class="flex justify-center -space-x-14">  <div class="bg-yellow-500 mix-blend-multiply ..."></div>  <div class="bg-green-500 mix-blend-multiply ..."></div></div>

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

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

<div class="mix-blend-multiply md:mix-blend-overlay ...">  <!-- ... --></div>

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

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