背景
background-image
用於控制元素背景圖片的工具類別。
| 類別 | 樣式 |
|---|---|
bg-[<值>] | background-image: <值>; |
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: <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>] 語法來設定元素的背景圖片
<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% 等工具來為漸層顏色停止點設定更精確的位置
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-[<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() 函式。
響應式設計
前綴一個 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>在 主題文件.
