Домашняя страница Tailwind CSS
  1. Эффекты
  2. Режим фонового смешивания

​
Краткая справка

Класс
Свойства
bg-blend-normalbackground-blend-mode: normal;
bg-blend-multiplybackground-blend-mode: multiply;
bg-blend-screenbackground-blend-mode: screen;
bg-blend-overlaybackground-blend-mode: overlay;
bg-blend-darkenbackground-blend-mode: darken;
bg-blend-lightenbackground-blend-mode: lighten;
bg-blend-color-dodgebackground-blend-mode: color-dodge;
bg-blend-color-burnbackground-blend-mode: color-burn;
bg-blend-hard-lightbackground-blend-mode: hard-light;
bg-blend-soft-lightbackground-blend-mode: soft-light;
bg-blend-differencebackground-blend-mode: difference;
bg-blend-exclusionbackground-blend-mode: exclusion;
bg-blend-huebackground-blend-mode: hue;
bg-blend-saturationbackground-blend-mode: saturation;
bg-blend-colorbackground-blend-mode: color;
bg-blend-luminositybackground-blend-mode: luminosity;

​
Основы использования

​
Установка режима наложения фона

Используйте утилиты bg-blend-{mode} для управления тем, как фоновые изображения элемента должны смешиваться с его цветом фона.

<div class="bg-blend-multiply ...">
  <!-- ... -->
</div>

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

​
Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:bg-blend-darken, чтобы применять утилиту bg-blend-darken только при hover.

<div class="bg-blend-lighten hover:bg-blend-darken">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​
Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:bg-blend-darken, чтобы применить утилиту bg-blend-darken только на экранах среднего размера и выше.

<div class="bg-blend-lighten md:bg-blend-darken">
  <!-- ... -->
</div>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.