background-image

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

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

¥Use the bg-[<value>] syntax to set the background image of an element:

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

添加线性渐变(Adding a linear gradient)

¥Adding a linear gradient

使用 bg-linear-to-r 和 bg-linear-<angle> 等工具与 颜色停止工具 一起使用，为元素添加线性渐变：

¥Use utilities like bg-linear-to-r and bg-linear-<angle> with the color stop utilities to add a linear gradient to an element:

<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>

添加径向渐变(Adding a radial gradient)

¥Adding a radial gradient

使用 bg-radial 和 bg-radial-[<position>] 工具与 颜色停止工具 一起为元素添加径向渐变：

¥Use the bg-radial and bg-radial-[<position>] utilities with the color stop utilities to add a radial gradient to an element:

<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>

添加圆锥渐变(Adding a conic gradient)

¥Adding a conic gradient

使用 bg-conic 和 bg-conic-<angle> 工具与 颜色停止工具 一起为元素添加圆锥渐变：

¥Use the bg-conic and bg-conic-<angle> utilities with the color stop utilities to add a conic gradient to an element:

<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>

设置渐变色停止点(Setting gradient color stops)

¥Setting gradient color stops

使用 from-indigo-500、via-purple-500 和 to-pink-500 等工具来设置渐变停止的颜色：

¥Use utilities like from-indigo-500, via-purple-500, and to-pink-500 to set the colors of the gradient stops:

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

设置渐变停止点位置(Setting gradient stop positions)

¥Setting gradient stop positions

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

¥Use utilities like from-10%, via-30%, and to-90% to set more precise positions for the gradient color stops:

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

更改插值模式(Changing interpolation mode)

¥Changing interpolation mode

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

¥Use the interpolation modifier to control the interpolation mode of a gradient:

<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 颜色空间中进行插值的。

¥By default gradients are interpolated in the oklab color space.

删除背景图片(Removing background images)

¥Removing background images

使用 bg-none 工具从元素中删除现有背景图片元素：

¥Use the bg-none utility to remove an existing background image from an element:

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

使用自定义值(Using a custom value)

¥Using a custom value

使用工具例如 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() 函数。

响应式设计(Responsive design)

¥Responsive design

在 background-image 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

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

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

现在的工具类如 from-regal-blue,via-regal-blue, and to-regal-blue 可以在你的标记中使用：

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

在此详细了解如何自定义主题： 主题文档。