background-image

用于控制元素背景图片的工具类。

快速参考

类	属性
bg-[<value>]	background-image: <value>;
bg-(image:<custom-property>)	background-image: var(<custom-property>);
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-linear-to-tl	background-image: linear-gradient(to top left, var(--tw-gradient-stops));
bg-linear-<angle>	background-image: linear-gradient(<angle> in oklab, var(--tw-gradient-stops));
-bg-linear-<angle>	background-image: linear-gradient(-<angle> in oklab, var(--tw-gradient-stops));
bg-linear-(<custom-property>)	background-image: linear-gradient(var(--tw-gradient-stops, var(<custom-property>)));
bg-linear-[<value>]	background-image: linear-gradient(var(--tw-gradient-stops, <value>));
bg-radial	background-image: radial-gradient(in oklab, var(--tw-gradient-stops));
bg-radial-(<custom-property>)	background-image: radial-gradient(var(--tw-gradient-stops, var(<custom-property>)));
bg-radial-[<value>]	background-image: radial-gradient(var(--tw-gradient-stops, <value>));
bg-conic-<angle>	background-image: conic-gradient(from <angle> in oklab, var(--tw-gradient-stops));
-bg-conic-<angle>	background-image: conic-gradient(from -<angle> in oklab, var(--tw-gradient-stops));
bg-conic-(<custom-property>)	background-image: var(<custom-property>);
bg-conic-[<value>]	background-image: <value>;
from-<color>	--tw-gradient-from: <color>;
from-<percentage>	--tw-gradient-from-position: <percentage>;
from-(<custom-property>)	--tw-gradient-from: var(<custom-property>);
from-[<value>]	--tw-gradient-from: <value>;
via-<color>	--tw-gradient-via: <color>;
via-<percentage>	--tw-gradient-via-position: <percentage>;
via-(<custom-property>)	--tw-gradient-via: var(<custom-property>);
via-[<value>]	--tw-gradient-via: <value>;
to-<color>	--tw-gradient-to: <color>;
to-<percentage>	--tw-gradient-to-position: <percentage>;
to-(<custom-property>)	--tw-gradient-to: var(<custom-property>);
to-[<value>]	--tw-gradient-to: <value>;

示例

基础示例

使用 bg-[<value>] 语法设置元素的背景图片：

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

添加线性渐变

使用 bg-linear-to-r、bg-linear-<angle> 等工具类，配合色标工具类，为元素添加线性渐变：

<!-- [!code classes:bg-linear-to-r,bg-linear-to-t,bg-linear-to-bl,bg-linear-65] -->
<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>] 工具类，配合色标工具类，为元素添加径向渐变：

<!-- [!code classes:bg-radial-[at_50%_75%],bg-radial-[at_25%_25%],bg-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-conic 和 bg-conic-<angle> 工具类，配合色标工具类，为元素添加锥形渐变：

<!-- [!code classes:bg-conic-180,bg-conic/decreasing,bg-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-500、via-purple-500 和 to-pink-500 等工具类设置渐变色标的颜色：

<!-- [!code classes:from-indigo-500,via-purple-500,to-pink-500] -->
<div class="bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 ..."></div>

设置渐变色标位置

使用 from-10%、via-30% 和 to-90% 等工具类为渐变色标设置更精确的位置：

10%

30%

90%

<!-- [!code classes:from-10%,via-30%,to-90%] -->
<div class="bg-linear-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

<!-- [!code word:/srgb] -->
<!-- [!code word:/hsl] -->
<!-- [!code word:/oklab] -->
<!-- [!code word:/oklch] -->
<!-- [!code word:/longer] -->
<!-- [!code word:/shorter] -->
<!-- [!code word:/increasing] -->
<!-- [!code word:/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 工具类移除元素上已有的背景图片：

<!-- [!code classes:bg-none] -->
<div class="bg-none"></div>

使用自定义值

使用 bg-linear-[<value>] 和 from-[<value>] 等工具类，根据完全自定义的值设置渐变：

<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() 函数。

响应式设计

使用 md: 等断点变体作为 background-image 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：

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

更多关于变体的用法，请参阅变体文档。

自定义主题

使用 --color-* 主题变量来自定义项目中的颜色工具类：

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

现在可以在标记中使用 from-regal-blue、via-regal-blue 和 to-regal-blue 等工具类：

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

更多关于自定义主题的内容，请参阅主题文档。