色彩與背景
背景顏色background-color
Setting the background color of an element.
Overview
| Class | Declarations |
|---|---|
bg:transparent | background-color: transparent;
|
bg:current | background-color: currentColor;
|
bg:black | background-color: oklch(0% 0 none);
|
bg:white | background-color: oklch(100% 0 none);
|
bg:stone | background-color: var(--color-stone);
|
bg:gray | background-color: var(--color-gray);
|
bg:neutral | background-color: var(--color-neutral);
|
bg:slate | background-color: var(--color-slate);
|
bg:brown | background-color: var(--color-brown);
|
bg:orange | background-color: var(--color-orange);
|
bg:amber | background-color: var(--color-amber);
|
bg:yellow | background-color: var(--color-yellow);
|
bg:lime | background-color: var(--color-lime);
|
bg:green | background-color: var(--color-green);
|
bg:beryl | background-color: var(--color-beryl);
|
bg:teal | background-color: var(--color-teal);
|
bg:cyan | background-color: var(--color-cyan);
|
bg:sky | background-color: var(--color-sky);
|
bg:blue | background-color: var(--color-blue);
|
bg:indigo | background-color: var(--color-indigo);
|
bg:violet | background-color: var(--color-violet);
|
bg:purple | background-color: var(--color-purple);
|
bg:fuchsia | background-color: var(--color-fuchsia);
|
bg:pink | background-color: var(--color-pink);
|
bg:crimson | background-color: var(--color-crimson);
|
bg:red | background-color: var(--color-red);
|
bg:stone-0 | background-color: var(--color-stone-0);
|
bg:stone-5 | background-color: var(--color-stone-5);
|
bg:stone-10 | background-color: var(--color-stone-10);
|
bg:stone-20 | background-color: var(--color-stone-20);
|
bg:stone-30 | background-color: var(--color-stone-30);
|
bg:stone-40 | background-color: var(--color-stone-40);
|
bg:stone-50 | background-color: var(--color-stone-50);
|
bg:stone-60 | background-color: var(--color-stone-60);
|
bg:stone-70 | background-color: var(--color-stone-70);
|
bg:stone-80 | background-color: var(--color-stone-80);
|
bg:stone-90 | background-color: var(--color-stone-90);
|
bg:stone-95 | background-color: var(--color-stone-95);
|
bg:stone-100 | background-color: var(--color-stone-100);
|
bg:gray-0 | background-color: var(--color-gray-0);
|
bg:gray-5 | background-color: var(--color-gray-5);
|
bg:gray-10 | background-color: var(--color-gray-10);
|
bg:gray-20 | background-color: var(--color-gray-20);
|
bg:gray-30 | background-color: var(--color-gray-30);
|
bg:gray-40 | background-color: var(--color-gray-40);
|
bg:gray-50 | background-color: var(--color-gray-50);
|
bg:gray-60 | background-color: var(--color-gray-60);
|
bg:gray-70 | background-color: var(--color-gray-70);
|
bg:gray-80 | background-color: var(--color-gray-80);
|
bg:gray-90 | background-color: var(--color-gray-90);
|
bg:gray-95 | background-color: var(--color-gray-95);
|
bg:gray-100 | background-color: var(--color-gray-100);
|
bg:neutral-0 | background-color: var(--color-neutral-0);
|
bg:neutral-5 | background-color: var(--color-neutral-5);
|
bg:neutral-10 | background-color: var(--color-neutral-10);
|
bg:neutral-20 | background-color: var(--color-neutral-20);
|
bg:neutral-30 | background-color: var(--color-neutral-30);
|
bg:neutral-40 | background-color: var(--color-neutral-40);
|
bg:neutral-50 | background-color: var(--color-neutral-50);
|
bg:neutral-60 | background-color: var(--color-neutral-60);
|
bg:neutral-70 | background-color: var(--color-neutral-70);
|
bg:neutral-80 | background-color: var(--color-neutral-80);
|
bg:neutral-90 | background-color: var(--color-neutral-90);
|
bg:neutral-95 | background-color: var(--color-neutral-95);
|
bg:neutral-100 | background-color: var(--color-neutral-100);
|
bg:slate-0 | background-color: var(--color-slate-0);
|
bg:slate-5 | background-color: var(--color-slate-5);
|
bg:slate-10 | background-color: var(--color-slate-10);
|
bg:slate-20 | background-color: var(--color-slate-20);
|
bg:slate-30 | background-color: var(--color-slate-30);
|
bg:slate-40 | background-color: var(--color-slate-40);
|
bg:slate-50 | background-color: var(--color-slate-50);
|
bg:slate-60 | background-color: var(--color-slate-60);
|
bg:slate-70 | background-color: var(--color-slate-70);
|
bg:slate-80 | background-color: var(--color-slate-80);
|
bg:slate-90 | background-color: var(--color-slate-90);
|
bg:slate-95 | background-color: var(--color-slate-95);
|
bg:slate-100 | background-color: var(--color-slate-100);
|
bg:brown-0 | background-color: var(--color-brown-0);
|
bg:brown-5 | background-color: var(--color-brown-5);
|
bg:brown-10 | background-color: var(--color-brown-10);
|
bg:brown-20 | background-color: var(--color-brown-20);
|
bg:brown-30 | background-color: var(--color-brown-30);
|
bg:brown-40 | background-color: var(--color-brown-40);
|
bg:brown-50 | background-color: var(--color-brown-50);
|
bg:brown-60 | background-color: var(--color-brown-60);
|
bg:brown-70 | background-color: var(--color-brown-70);
|
bg:brown-80 | background-color: var(--color-brown-80);
|
bg:brown-90 | background-color: var(--color-brown-90);
|
bg:brown-95 | background-color: var(--color-brown-95);
|
bg:brown-100 | background-color: var(--color-brown-100);
|
bg:orange-0 | background-color: var(--color-orange-0);
|
bg:orange-5 | background-color: var(--color-orange-5);
|
bg:orange-10 | background-color: var(--color-orange-10);
|
bg:orange-20 | background-color: var(--color-orange-20);
|
bg:orange-30 | background-color: var(--color-orange-30);
|
bg:orange-40 | background-color: var(--color-orange-40);
|
bg:orange-50 | background-color: var(--color-orange-50);
|
bg:orange-60 | background-color: var(--color-orange-60);
|
bg:orange-70 | background-color: var(--color-orange-70);
|
bg:orange-80 | background-color: var(--color-orange-80);
|
bg:orange-90 | background-color: var(--color-orange-90);
|
bg:orange-95 | background-color: var(--color-orange-95);
|
bg:orange-100 | background-color: var(--color-orange-100);
|
bg:amber-0 | background-color: var(--color-amber-0);
|
bg:amber-5 | background-color: var(--color-amber-5);
|
bg:amber-10 | background-color: var(--color-amber-10);
|
bg:amber-20 | background-color: var(--color-amber-20);
|
bg:amber-30 | background-color: var(--color-amber-30);
|
bg:amber-40 | background-color: var(--color-amber-40);
|
bg:amber-50 | background-color: var(--color-amber-50);
|
bg:amber-60 | background-color: var(--color-amber-60);
|
bg:amber-70 | background-color: var(--color-amber-70);
|
bg:amber-80 | background-color: var(--color-amber-80);
|
bg:amber-90 | background-color: var(--color-amber-90);
|
bg:amber-95 | background-color: var(--color-amber-95);
|
bg:amber-100 | background-color: var(--color-amber-100);
|
bg:yellow-0 | background-color: var(--color-yellow-0);
|
bg:yellow-5 | background-color: var(--color-yellow-5);
|
bg:yellow-10 | background-color: var(--color-yellow-10);
|
bg:yellow-20 | background-color: var(--color-yellow-20);
|
bg:yellow-30 | background-color: var(--color-yellow-30);
|
bg:yellow-40 | background-color: var(--color-yellow-40);
|
bg:yellow-50 | background-color: var(--color-yellow-50);
|
bg:yellow-60 | background-color: var(--color-yellow-60);
|
bg:yellow-70 | background-color: var(--color-yellow-70);
|
bg:yellow-80 | background-color: var(--color-yellow-80);
|
bg:yellow-90 | background-color: var(--color-yellow-90);
|
bg:yellow-95 | background-color: var(--color-yellow-95);
|
bg:yellow-100 | background-color: var(--color-yellow-100);
|
bg:lime-0 | background-color: var(--color-lime-0);
|
bg:lime-5 | background-color: var(--color-lime-5);
|
bg:lime-10 | background-color: var(--color-lime-10);
|
bg:lime-20 | background-color: var(--color-lime-20);
|
bg:lime-30 | background-color: var(--color-lime-30);
|
bg:lime-40 | background-color: var(--color-lime-40);
|
bg:lime-50 | background-color: var(--color-lime-50);
|
bg:lime-60 | background-color: var(--color-lime-60);
|
bg:lime-70 | background-color: var(--color-lime-70);
|
bg:lime-80 | background-color: var(--color-lime-80);
|
bg:lime-90 | background-color: var(--color-lime-90);
|
bg:lime-95 | background-color: var(--color-lime-95);
|
bg:lime-100 | background-color: var(--color-lime-100);
|
bg:green-0 | background-color: var(--color-green-0);
|
bg:green-5 | background-color: var(--color-green-5);
|
bg:green-10 | background-color: var(--color-green-10);
|
bg:green-20 | background-color: var(--color-green-20);
|
bg:green-30 | background-color: var(--color-green-30);
|
bg:green-40 | background-color: var(--color-green-40);
|
bg:green-50 | background-color: var(--color-green-50);
|
bg:green-60 | background-color: var(--color-green-60);
|
bg:green-70 | background-color: var(--color-green-70);
|
bg:green-80 | background-color: var(--color-green-80);
|
bg:green-90 | background-color: var(--color-green-90);
|
bg:green-95 | background-color: var(--color-green-95);
|
bg:green-100 | background-color: var(--color-green-100);
|
bg:beryl-0 | background-color: var(--color-beryl-0);
|
bg:beryl-5 | background-color: var(--color-beryl-5);
|
bg:beryl-10 | background-color: var(--color-beryl-10);
|
bg:beryl-20 | background-color: var(--color-beryl-20);
|
bg:beryl-30 | background-color: var(--color-beryl-30);
|
bg:beryl-40 | background-color: var(--color-beryl-40);
|
bg:beryl-50 | background-color: var(--color-beryl-50);
|
bg:beryl-60 | background-color: var(--color-beryl-60);
|
bg:beryl-70 | background-color: var(--color-beryl-70);
|
bg:beryl-80 | background-color: var(--color-beryl-80);
|
bg:beryl-90 | background-color: var(--color-beryl-90);
|
bg:beryl-95 | background-color: var(--color-beryl-95);
|
bg:beryl-100 | background-color: var(--color-beryl-100);
|
bg:teal-0 | background-color: var(--color-teal-0);
|
bg:teal-5 | background-color: var(--color-teal-5);
|
bg:teal-10 | background-color: var(--color-teal-10);
|
bg:teal-20 | background-color: var(--color-teal-20);
|
bg:teal-30 | background-color: var(--color-teal-30);
|
bg:teal-40 | background-color: var(--color-teal-40);
|
bg:teal-50 | background-color: var(--color-teal-50);
|
bg:teal-60 | background-color: var(--color-teal-60);
|
bg:teal-70 | background-color: var(--color-teal-70);
|
bg:teal-80 | background-color: var(--color-teal-80);
|
bg:teal-90 | background-color: var(--color-teal-90);
|
bg:teal-95 | background-color: var(--color-teal-95);
|
bg:teal-100 | background-color: var(--color-teal-100);
|
bg:cyan-0 | background-color: var(--color-cyan-0);
|
bg:cyan-5 | background-color: var(--color-cyan-5);
|
bg:cyan-10 | background-color: var(--color-cyan-10);
|
bg:cyan-20 | background-color: var(--color-cyan-20);
|
bg:cyan-30 | background-color: var(--color-cyan-30);
|
bg:cyan-40 | background-color: var(--color-cyan-40);
|
bg:cyan-50 | background-color: var(--color-cyan-50);
|
bg:cyan-60 | background-color: var(--color-cyan-60);
|
bg:cyan-70 | background-color: var(--color-cyan-70);
|
bg:cyan-80 | background-color: var(--color-cyan-80);
|
bg:cyan-90 | background-color: var(--color-cyan-90);
|
bg:cyan-95 | background-color: var(--color-cyan-95);
|
bg:cyan-100 | background-color: var(--color-cyan-100);
|
bg:sky-0 | background-color: var(--color-sky-0);
|
bg:sky-5 | background-color: var(--color-sky-5);
|
bg:sky-10 | background-color: var(--color-sky-10);
|
bg:sky-20 | background-color: var(--color-sky-20);
|
bg:sky-30 | background-color: var(--color-sky-30);
|
bg:sky-40 | background-color: var(--color-sky-40);
|
bg:sky-50 | background-color: var(--color-sky-50);
|
bg:sky-60 | background-color: var(--color-sky-60);
|
bg:sky-70 | background-color: var(--color-sky-70);
|
bg:sky-80 | background-color: var(--color-sky-80);
|
bg:sky-90 | background-color: var(--color-sky-90);
|
bg:sky-95 | background-color: var(--color-sky-95);
|
bg:sky-100 | background-color: var(--color-sky-100);
|
bg:blue-0 | background-color: var(--color-blue-0);
|
bg:blue-5 | background-color: var(--color-blue-5);
|
bg:blue-10 | background-color: var(--color-blue-10);
|
bg:blue-20 | background-color: var(--color-blue-20);
|
bg:blue-30 | background-color: var(--color-blue-30);
|
bg:blue-40 | background-color: var(--color-blue-40);
|
bg:blue-50 | background-color: var(--color-blue-50);
|
bg:blue-60 | background-color: var(--color-blue-60);
|
bg:blue-70 | background-color: var(--color-blue-70);
|
bg:blue-80 | background-color: var(--color-blue-80);
|
bg:blue-90 | background-color: var(--color-blue-90);
|
bg:blue-95 | background-color: var(--color-blue-95);
|
bg:blue-100 | background-color: var(--color-blue-100);
|
bg:indigo-0 | background-color: var(--color-indigo-0);
|
bg:indigo-5 | background-color: var(--color-indigo-5);
|
bg:indigo-10 | background-color: var(--color-indigo-10);
|
bg:indigo-20 | background-color: var(--color-indigo-20);
|
bg:indigo-30 | background-color: var(--color-indigo-30);
|
bg:indigo-40 | background-color: var(--color-indigo-40);
|
bg:indigo-50 | background-color: var(--color-indigo-50);
|
bg:indigo-60 | background-color: var(--color-indigo-60);
|
bg:indigo-70 | background-color: var(--color-indigo-70);
|
bg:indigo-80 | background-color: var(--color-indigo-80);
|
bg:indigo-90 | background-color: var(--color-indigo-90);
|
bg:indigo-95 | background-color: var(--color-indigo-95);
|
bg:indigo-100 | background-color: var(--color-indigo-100);
|
bg:violet-0 | background-color: var(--color-violet-0);
|
bg:violet-5 | background-color: var(--color-violet-5);
|
bg:violet-10 | background-color: var(--color-violet-10);
|
bg:violet-20 | background-color: var(--color-violet-20);
|
bg:violet-30 | background-color: var(--color-violet-30);
|
bg:violet-40 | background-color: var(--color-violet-40);
|
bg:violet-50 | background-color: var(--color-violet-50);
|
bg:violet-60 | background-color: var(--color-violet-60);
|
bg:violet-70 | background-color: var(--color-violet-70);
|
bg:violet-80 | background-color: var(--color-violet-80);
|
bg:violet-90 | background-color: var(--color-violet-90);
|
bg:violet-95 | background-color: var(--color-violet-95);
|
bg:violet-100 | background-color: var(--color-violet-100);
|
bg:purple-0 | background-color: var(--color-purple-0);
|
bg:purple-5 | background-color: var(--color-purple-5);
|
bg:purple-10 | background-color: var(--color-purple-10);
|
bg:purple-20 | background-color: var(--color-purple-20);
|
bg:purple-30 | background-color: var(--color-purple-30);
|
bg:purple-40 | background-color: var(--color-purple-40);
|
bg:purple-50 | background-color: var(--color-purple-50);
|
bg:purple-60 | background-color: var(--color-purple-60);
|
bg:purple-70 | background-color: var(--color-purple-70);
|
bg:purple-80 | background-color: var(--color-purple-80);
|
bg:purple-90 | background-color: var(--color-purple-90);
|
bg:purple-95 | background-color: var(--color-purple-95);
|
bg:purple-100 | background-color: var(--color-purple-100);
|
bg:fuchsia-0 | background-color: var(--color-fuchsia-0);
|
bg:fuchsia-5 | background-color: var(--color-fuchsia-5);
|
bg:fuchsia-10 | background-color: var(--color-fuchsia-10);
|
bg:fuchsia-20 | background-color: var(--color-fuchsia-20);
|
bg:fuchsia-30 | background-color: var(--color-fuchsia-30);
|
bg:fuchsia-40 | background-color: var(--color-fuchsia-40);
|
bg:fuchsia-50 | background-color: var(--color-fuchsia-50);
|
bg:fuchsia-60 | background-color: var(--color-fuchsia-60);
|
bg:fuchsia-70 | background-color: var(--color-fuchsia-70);
|
bg:fuchsia-80 | background-color: var(--color-fuchsia-80);
|
bg:fuchsia-90 | background-color: var(--color-fuchsia-90);
|
bg:fuchsia-95 | background-color: var(--color-fuchsia-95);
|
bg:fuchsia-100 | background-color: var(--color-fuchsia-100);
|
bg:pink-0 | background-color: var(--color-pink-0);
|
bg:pink-5 | background-color: var(--color-pink-5);
|
bg:pink-10 | background-color: var(--color-pink-10);
|
bg:pink-20 | background-color: var(--color-pink-20);
|
bg:pink-30 | background-color: var(--color-pink-30);
|
bg:pink-40 | background-color: var(--color-pink-40);
|
bg:pink-50 | background-color: var(--color-pink-50);
|
bg:pink-60 | background-color: var(--color-pink-60);
|
bg:pink-70 | background-color: var(--color-pink-70);
|
bg:pink-80 | background-color: var(--color-pink-80);
|
bg:pink-90 | background-color: var(--color-pink-90);
|
bg:pink-95 | background-color: var(--color-pink-95);
|
bg:pink-100 | background-color: var(--color-pink-100);
|
bg:crimson-0 | background-color: var(--color-crimson-0);
|
bg:crimson-5 | background-color: var(--color-crimson-5);
|
bg:crimson-10 | background-color: var(--color-crimson-10);
|
bg:crimson-20 | background-color: var(--color-crimson-20);
|
bg:crimson-30 | background-color: var(--color-crimson-30);
|
bg:crimson-40 | background-color: var(--color-crimson-40);
|
bg:crimson-50 | background-color: var(--color-crimson-50);
|
bg:crimson-60 | background-color: var(--color-crimson-60);
|
bg:crimson-70 | background-color: var(--color-crimson-70);
|
bg:crimson-80 | background-color: var(--color-crimson-80);
|
bg:crimson-90 | background-color: var(--color-crimson-90);
|
bg:crimson-95 | background-color: var(--color-crimson-95);
|
bg:crimson-100 | background-color: var(--color-crimson-100);
|
bg:red-0 | background-color: var(--color-red-0);
|
bg:red-5 | background-color: var(--color-red-5);
|
bg:red-10 | background-color: var(--color-red-10);
|
bg:red-20 | background-color: var(--color-red-20);
|
bg:red-30 | background-color: var(--color-red-30);
|
bg:red-40 | background-color: var(--color-red-40);
|
bg:red-50 | background-color: var(--color-red-50);
|
bg:red-60 | background-color: var(--color-red-60);
|
bg:red-70 | background-color: var(--color-red-70);
|
bg:red-80 | background-color: var(--color-red-80);
|
bg:red-90 | background-color: var(--color-red-90);
|
bg:red-95 | background-color: var(--color-red-95);
|
bg:red-100 | background-color: var(--color-red-100);
|
bg:<color> | background-color: <color>;
|
Basic usage
With opacity
Add the suffix /alpha to change the opacity of any color.
<div class="bg:blue">…</div>Use bg:* for preset palette colors, project theme colors, and one-off colors.
<section class="bg:blue">...</section><span class="bg:pink/.12">Badge</span>Generated CSS
@layer theme { :root { --color-blue-60: oklch(51.83% .2687 266.1); --color-blue-50: oklch(58.22% .2279 263.9); --color-pink-60: oklch(63.54% .25 359.2); --color-pink-50: oklch(65.84% .25 350.7) } @media (prefers-color-scheme:light) { :root { --color-blue: var(--color-blue-60); --color-pink: var(--color-pink-60) } } @media (prefers-color-scheme:dark) { :root { --color-blue: var(--color-blue-50); --color-pink: var(--color-pink-50) } }}@layer utilities { .bg\:blue { background-color: var(--color-blue) } .bg\:pink\/\.12 { background-color: color-mix(in oklab, var(--color-pink) 12%, transparent) }}Use alpha suffixes for local overlays, badges, and hover states. Add project theme colors only when a repeated color decision needs a shared name.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="bg:blue bg:pink/.12:hover bg:white@print">...</div>