1. 背景
  2. background-image

背景

background-image

用于控制元素背景图像的实用工具。

样式
bg-[<value>]
background-image: <value>;
bg-(<自定义属性>)
background-image: var(<自定义属性>);
bg-none
background-image: none;
bg-linear-to-t
background-image: linear-gradient(to top, var(--tw-gradient-stops));
bg-linear-to-tr
background-image: linear-gradient(to top right, var(--tw-gradient-stops));
bg-linear-to-r
background-image: linear-gradient(to right, var(--tw-gradient-stops));
bg-linear-to-br
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
bg-linear-to-b
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
bg-linear-to-bl
background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
bg-linear-to-l
background-image: linear-gradient(to left, var(--tw-gradient-stops));

示例

基本示例

使用 bg-[<值>] 语法来设置元素的背景图像

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

添加线性渐变

使用诸如 bg-linear-to-rbg-linear-<角度> 等实用工具以及 颜色停止实用工具 向元素添加线性渐变

<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-radialbg-radial-[<位置>] 实用工具以及 颜色停止实用工具 向元素添加径向渐变

<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-conicbg-conic-<角度> 实用工具以及 颜色停止实用工具 向元素添加锥形渐变

<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-500via-purple-500to-pink-500 等实用工具来设置渐变停止的颜色

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

设置渐变停止位置

使用诸如 from-10%via-30%to-90% 等实用工具来为渐变颜色停止设置更精确的位置

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

更改插值模式

使用插值修饰符来控制渐变的插值模式

srgb

hsl

oklab

oklch

longer

shorter

increasing

decreasing

<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-[<值>]from-[<值>]来设置渐变基于完全自定义的值

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

对于 CSS 变量,您还可以使用 bg-linear-(<自定义属性>) 语法

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

这只是 bg-linear-[var(<自定义属性>)] 的简写,它会自动为您添加 var() 函数。

响应式设计

前缀a background-image 实用工具 带有诸如 md: 的断点变体,以便仅在中等 屏幕尺寸及以上应用该实用工具

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

请参阅变体文档,了解有关使用变体的更多信息。

自定义你的主题

使用 --color-* 主题变量来自定义color 项目中的实用工具

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

现在可以使用以下实用工具 from-regal-bluevia-regal-blueto-regal-blue可以在你的标记中使用

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

请参阅主题文档,了解有关自定义主题的更多信息 主题文档.

版权所有 © 2025 Tailwind Labs Inc.·商标政策