背景
用于控制元素背景图像的实用工具。
类 | 样式 |
---|---|
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-linear-to-tl | background-image: linear-gradient(to top left, var(--tw-gradient-stops)); |
bg-linear-<角度> | background-image: linear-gradient(<角度> in oklab, var(--tw-gradient-stops)); |
-bg-linear-<角度> | background-image: linear-gradient(-<角度> in oklab, var(--tw-gradient-stops)); |
bg-linear(<自定义属性>) | background-image: linear-gradient(var(--tw-gradient-stops, var(<自定义属性>))); |
bg-linear-[<值>] | background-image: linear-gradient(var(--tw-gradient-stops, <值>)); |
bg-radial | background-image: radial-gradient(in oklab, var(--tw-gradient-stops)); |
bg-radial-(<自定义属性>) | background-image: radial-gradient(var(--tw-gradient-stops, var(<自定义属性>))); |
bg-radial-[<值>] | background-image: radial-gradient(var(--tw-gradient-stops, <值>)); |
bg-conic-<角度> | background-image: conic-gradient(from <角度> in oklab, var(--tw-gradient-stops)); |
-bg-conic-<角度> | background-image: conic-gradient(from -<角度> in oklab, var(--tw-gradient-stops)); |
bg-conic-(<自定义属性>) | background-image: var(<自定义属性>); |
bg-conic-[<值>] | background-image: <图像>; |
from-<颜色> | --tw-gradient-from: <颜色>; |
from-<百分比> | --tw-gradient-from-position: <百分比>; |
from-(<自定义属性>) | --tw-gradient-from: var(<自定义属性>); |
from-[<值>] | --tw-gradient-from: <值>; |
via-<颜色> | --tw-gradient-via: <颜色>; |
via-<百分比> | --tw-gradient-via-position: <百分比>; |
via-(<自定义属性>) | --tw-gradient-via: var(<自定义属性>); |
via-[<值>] | --tw-gradient-via: <值>; |
to-<颜色> | --tw-gradient-to: <颜色>; |
to-<百分比> | --tw-gradient-to-position: <百分比>; |
to-(<自定义属性>) | --tw-gradient-to: var(<自定义属性>); |
to-[<值>] | --tw-gradient-to: <值>; |
使用 bg-[<值>]
语法来设置元素的背景图像
<div class="bg-[url(/img/mountains.jpg)] ..."></div>
使用诸如 bg-linear-to-r
和 bg-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-radial
和 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-<角度>
实用工具以及 颜色停止实用工具 向元素添加锥形渐变
<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>
使用插值修饰符来控制渐变的插值模式
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-blue
、via-regal-blue
、和 to-regal-blue
可以在你的标记中使用
<div class="from-regal-blue"> <!-- ... --></div>