Домашняя страница Tailwind CSS
  1. Фоны
  2. Происхождение фона

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

Класс
Свойства
bg-origin-borderbackground-origin: border-box;
bg-origin-paddingbackground-origin: padding-box;
bg-origin-contentbackground-origin: content-box;

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

Установка источника фона

Используйте bg-origin-border, bg-origin-padding и bg-origin-content для управления отображением фона элемента.

bg-origin-border

bg-origin-padding

bg-origin-content

<div class="bg-origin-border p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>
<div class="bg-origin-padding p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>
<div class="bg-origin-content p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>

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

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

<div class="bg-origin-border hover:bg-origin-padding">
  <!-- ... -->
</div>

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

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

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

<div class="bg-origin-border md:bg-origin-padding">
  <!-- ... -->
</div>

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