background-image

Примеры

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

Используйте синтаксис bg-[<value>] для установки фонового изображения элемента:

<div class="bg-[url(/img/mountains.jpg)] ..."></div>

Добавление линейного градиента

Используйте утилиты вроде bg-linear-to-r и bg-linear-<angle> вместе с утилитами цветовых остановок для добавления линейного градиента к элементу:

<div class="h-14 bg-linear-to-r from-cyan-500 to-blue-500"></div><div class="h-14 bg-linear-to-t from-sky-500 to-indigo-500"></div><div class="h-14 bg-linear-to-bl from-violet-500 to-fuchsia-500"></div><div class="h-14 bg-linear-65 from-purple-500 to-pink-500"></div>

Добавление радиального градиента

Используйте утилиты bg-radial и bg-radial-[<position>] вместе с утилитами цветовых остановок для добавления радиального градиента к элементу:

<div class="size-18 rounded-full bg-radial from-pink-400 from-40% to-fuchsia-700"></div><div class="size-18 rounded-full bg-radial-[at_50%_75%] from-sky-200 via-blue-400 to-indigo-900 to-90%"></div><div class="size-18 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

Добавление конического градиента

Используйте утилиты bg-conic и bg-conic-<angle> вместе с утилитами цветовых остановок для добавления конического градиента к элементу:

<div class="size-24 rounded-full bg-conic from-blue-600 to-sky-400 to-50%"></div><div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div><div class="size-24 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700"></div>

Установка цветовых остановок градиента

Используйте утилиты вроде from-indigo-500, via-purple-500 и to-pink-500 для установки цветов остановок градиента:

<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 ..."></div>

Установка позиций остановок градиента

Используйте утилиты вроде from-10%, via-30% и to-90% для установки более точных позиций цветовых остановок градиента:

<div class="bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% ..."></div>

Изменение режима интерполяции

Используйте модификатор интерполяции для управления режимом интерполяции градиента:

<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/hsl from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/oklab from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/longer from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/shorter from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/increasing from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/decreasing from-indigo-500 to-teal-400"></div>

По умолчанию градиенты интерполируются в цветовом пространстве oklab.

Удаление фоновых изображений

Используйте утилиту bg-none для удаления существующего фонового изображения элемента:

<div class="bg-none"></div>

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

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

<div class="bg-linear-[25deg,red_5%,yellow_60%,lime_90%,teal] ...">  <!-- ... --></div>

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

<div class="bg-linear-(--my-gradient) ...">  <!-- ... --></div>

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

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

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

<div class="from-purple-400 md:from-yellow-500 ...">  <!-- ... --></div>

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

Кастомизация вашей темы

Используйте переменные темы --color-* для настройки утилит color в вашем проекте:

@theme {  --color-regal-blue: #243c5a; }

Теперь утилиты типа from-regal-blue,via-regal-blue, and to-regal-blue можно использовать в вашей разметке:

<div class="from-regal-blue">  <!-- ... --></div>

Подробнее о настройке темы читайте в документации темы.