Back to Details

tailwindcss-backgrounds

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Tailwind CSS Backgrounds Skill

Tailwind CSS 背景工具类参考

Complete reference for background utilities in Tailwind CSS v4.1, including colors, gradients, images, positioning, sizing, and blend modes.
本文是Tailwind CSS v4.1中背景工具类的完整参考，涵盖颜色、渐变、图片、定位、尺寸以及混合模式。

Background Colors

背景颜色

Use 
bg-{color}
utilities to set background colors with the modernized OKLCH color palette.
html
<!-- Basic colors -->
<div class="bg-red-500"></div>
<div class="bg-blue-600"></div>
<div class="bg-emerald-400"></div>

<!-- Opacity modifiers -->
<div class="bg-blue-500/50"></div>
<div class="bg-slate-900/75"></div>
使用 
bg-{color}
工具类，结合现代化的OKLCH调色板来设置背景颜色。
html
<!-- Basic colors -->
<div class="bg-red-500"></div>
<div class="bg-blue-600"></div>
<div class="bg-emerald-400"></div>

<!-- Opacity modifiers -->
<div class="bg-blue-500/50"></div>
<div class="bg-slate-900/75"></div>

Color Palette (OKLCH P3)

调色板（OKLCH P3）

The default Tailwind palette uses OKLCH color space for perceptually uniform colors across the wider P3 gamut:
  • Neutrals: slate, gray, zinc, neutral, stone
  • Colors: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
Each color has 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
Tailwind默认调色板采用OKLCH色彩空间，在更广泛的P3色域中实现感知均匀的颜色：
  • 中性色：slate、gray、zinc、neutral、stone
  • 彩色系：red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose
每种颜色包含11种色调：50、100、200、300、400、500、600、700、800、900、950

Linear Gradients

线性渐变

Create linear gradients using 
bg-linear-*
utilities with direction and color stops.
html
<!-- Directions -->
<div class="bg-linear-to-t from-blue-500 to-purple-500"></div>
<div class="bg-linear-to-r from-green-400 via-blue-500 to-purple-600"></div>
<div class="bg-linear-to-br from-yellow-200 to-red-600"></div>

<!-- Available directions -->
<!-- bg-linear-to-t, to-tr, to-r, to-br, to-b, to-bl, to-l, to-tl -->

<!-- Custom angles -->
<div class="bg-linear-45 from-slate-400 to-slate-600"></div>
<div class="bg-linear-180 from-indigo-500 to-pink-500"></div>
使用 
bg-linear-*
工具类创建线性渐变，可设置方向和颜色节点。
html
<!-- Directions -->
<div class="bg-linear-to-t from-blue-500 to-purple-500"></div>
<div class="bg-linear-to-r from-green-400 via-blue-500 to-purple-600"></div>
<div class="bg-linear-to-br from-yellow-200 to-red-600"></div>

<!-- Available directions -->
<!-- bg-linear-to-t, to-tr, to-r, to-br, to-b, to-bl, to-l, to-tl -->

<!-- Custom angles -->
<div class="bg-linear-45 from-slate-400 to-slate-600"></div>
<div class="bg-linear-180 from-indigo-500 to-pink-500"></div>

Direction Utilities

方向工具类

  • bg-linear-to-t
    - to top
  • bg-linear-to-tr
    - to top right
  • bg-linear-to-r
    - to right
  • bg-linear-to-br
    - to bottom right
  • bg-linear-to-b
    - to bottom
  • bg-linear-to-bl
    - to bottom left
  • bg-linear-to-l
    - to left
  • bg-linear-to-tl
    - to top left
  • bg-linear-<angle>
    - custom angle (e.g., 
    bg-linear-45
    )
  • bg-linear-to-t
    - 向上
  • bg-linear-to-tr
    - 向右上
  • bg-linear-to-r
    - 向右
  • bg-linear-to-br
    - 向右下
  • bg-linear-to-b
    - 向下
  • bg-linear-to-bl
    - 向左下
  • bg-linear-to-l
    - 向左
  • bg-linear-to-tl
    - 向左上
  • bg-linear-<angle>
    - 自定义角度（例如 
    bg-linear-45
    ）

Radial Gradients

径向渐变

Create radial gradients using 
bg-radial-*
utilities.
html
<div class="bg-radial from-yellow-400 to-slate-900"></div>
<div class="bg-radial from-purple-200 via-blue-400 to-slate-950"></div>
使用 
bg-radial-*
工具类创建径向渐变。
html
<div class="bg-radial from-yellow-400 to-slate-900"></div>
<div class="bg-radial from-purple-200 via-blue-400 to-slate-950"></div>

Conic Gradients (NEW in v4.1)

锥形渐变（v4.1 新增）

Create conic gradients using 
bg-conic-*
utilities, perfect for color wheels and circular patterns.
html
<div class="bg-conic-0 from-red-500 to-red-500"></div>
<div class="bg-conic-45 from-blue-400 via-purple-500 to-pink-400"></div>
<div class="bg-conic-[from_45deg] from-slate-400 to-slate-600"></div>
使用 
bg-conic-*
工具类创建锥形渐变，非常适合制作色轮和圆形图案。
html
<div class="bg-conic-0 from-red-500 to-red-500"></div>
<div class="bg-conic-45 from-blue-400 via-purple-500 to-pink-400"></div>
<div class="bg-conic-[from_45deg] from-slate-400 to-slate-600"></div>

Gradient Color Stops

渐变颜色节点

Control gradient color stops with 
from-*
, 
via-*
, and 
to-*
utilities.
html
<!-- Two colors -->
<div class="bg-linear-to-r from-blue-500 to-purple-500"></div>

<!-- Three colors -->
<div class="bg-linear-to-r from-green-400 via-blue-500 to-purple-600"></div>

<!-- Custom positions -->
<div class="bg-linear-to-r from-blue-500 from-0% to-purple-500 to-100%"></div>
使用 
from-*
、
via-*
和 
to-*
工具类控制渐变的颜色节点。
html
<!-- Two colors -->
<div class="bg-linear-to-r from-blue-500 to-purple-500"></div>

<!-- Three colors -->
<div class="bg-linear-to-r from-green-400 via-blue-500 to-purple-600"></div>

<!-- Custom positions -->
<div class="bg-linear-to-r from-blue-500 from-0% to-purple-500 to-100%"></div>

Background Images

背景图片

Use 
bg-[url(...)]
to apply custom background images.
html
<div class="bg-[url(/img/mountains.jpg)]"></div>
<div class="bg-[url(data:image/svg+xml,...)]"></div>
使用 
bg-[url(...)]
来应用自定义背景图片。
html
<div class="bg-[url(/img/mountains.jpg)]"></div>
<div class="bg-[url(data:image/svg+xml,...)]"></div>

Background Size

背景尺寸

Control how background images are sized.
html
<!-- Predefined sizes -->
<div class="bg-cover"><!-- Fills container, may crop --></div>
<div class="bg-contain"><!-- Scales to fit, may show blank space --></div>

<!-- Custom sizes -->
<div class="bg-[size:10rem]"></div>
<div class="bg-[size:50%]"></div>
<div class="bg-[size:200px_100px]"></div>
控制背景图片的显示尺寸。
html
<!-- Predefined sizes -->
<div class="bg-cover"><!-- 填充容器，可能会裁剪 --></div>
<div class="bg-contain"><!-- 缩放以适应容器，可能会显示空白 --></div>

<!-- Custom sizes -->
<div class="bg-[size:10rem]"></div>
<div class="bg-[size:50%]"></div>
<div class="bg-[size:200px_100px]"></div>

Background Position

背景定位

Position the background image within its container.
html
<!-- Predefined positions -->
<div class="bg-top-left"></div>
<div class="bg-top"></div>
<div class="bg-top-right"></div>
<div class="bg-left"></div>
<div class="bg-center"></div>
<div class="bg-right"></div>
<div class="bg-bottom-left"></div>
<div class="bg-bottom"></div>
<div class="bg-bottom-right"></div>

<!-- Custom positions -->
<div class="bg-[position:25%_75%]"></div>
设置背景图片在容器内的位置。
html
<!-- Predefined positions -->
<div class="bg-top-left"></div>
<div class="bg-top"></div>
<div class="bg-top-right"></div>
<div class="bg-left"></div>
<div class="bg-center"></div>
<div class="bg-right"></div>
<div class="bg-bottom-left"></div>
<div class="bg-bottom"></div>
<div class="bg-bottom-right"></div>

<!-- Custom positions -->
<div class="bg-[position:25%_75%]"></div>

Background Repeat

背景重复

Control how background images repeat.
html
<!-- Repeat -->
<div class="bg-repeat"><!-- Tile in both directions --></div>
<div class="bg-repeat-x"><!-- Tile horizontally --></div>
<div class="bg-repeat-y"><!-- Tile vertically --></div>

<!-- No repeat -->
<div class="bg-no-repeat"><!-- Single image --></div>
控制背景图片的重复方式。
html
<!-- Repeat -->
<div class="bg-repeat"><!-- 双向平铺 --></div>
<div class="bg-repeat-x"><!-- 水平平铺 --></div>
<div class="bg-repeat-y"><!-- 垂直平铺 --></div>

<!-- No repeat -->
<div class="bg-no-repeat"><!-- 仅显示单张图片 --></div>

Background Blend Modes

背景混合模式

Combine background colors with images using blend modes.
html
<div class="bg-blue-500 bg-[url(...)] bg-blend-multiply"></div>
<div class="bg-slate-700 bg-[url(...)] bg-blend-overlay"></div>
<div class="bg-amber-400 bg-[url(...)] bg-blend-soft-light"></div>

<!-- Available blend modes -->
<!-- multiply, screen, overlay, darken, lighten, color-dodge,
     color-burn, hard-light, soft-light, difference, exclusion,
     hue, saturation, color, luminosity -->
使用混合模式将背景颜色与图片结合。
html
<div class="bg-blue-500 bg-[url(...)] bg-blend-multiply"></div>
<div class="bg-slate-700 bg-[url(...)] bg-blend-overlay"></div>
<div class="bg-amber-400 bg-[url(...)] bg-blend-soft-light"></div>

<!-- Available blend modes -->
<!-- multiply, screen, overlay, darken, lighten, color-dodge,
     color-burn, hard-light, soft-light, difference, exclusion,
     hue, saturation, color, luminosity -->

Complete Examples

完整示例

Color Background with Opacity

带透明度的背景颜色

html
<div class="bg-slate-900/50 px-6 py-8 rounded-lg">
  Content with translucent background
</div>
html
<div class="bg-slate-900/50 px-6 py-8 rounded-lg">
  带半透明背景的内容
</div>

Gradient Overlay on Image

图片上的渐变叠加层

html
<div class="bg-[url(/img/hero.jpg)] bg-cover bg-center
           bg-linear-to-br from-black/40 to-transparent
           h-96 flex items-center justify-center">
  <h1 class="text-white text-4xl font-bold">Hero Title</h1>
</div>
html
<div class="bg-[url(/img/hero.jpg)] bg-cover bg-center
           bg-linear-to-br from-black/40 to-transparent
           h-96 flex items-center justify-center">
  <h1 class="text-white text-4xl font-bold">Hero 标题</h1>
</div>

Gradient with Multiple Stops

多节点渐变

html
<div class="bg-linear-to-r
           from-emerald-500 from-0%
           via-blue-500 via-50%
           to-purple-600 to-100%
           h-20 rounded-lg"></div>
html
<div class="bg-linear-to-r
           from-emerald-500 from-0%
           via-blue-500 via-50%
           to-purple-600 to-100%
           h-20 rounded-lg"></div>

Conic Gradient (Color Wheel)

锥形渐变（色轮）

html
<div class="w-32 h-32 rounded-full
           bg-conic-0
           from-red-500 via-yellow-500 via-green-500 via-blue-500 via-purple-500 to-red-500"></div>
html
<div class="w-32 h-32 rounded-full
           bg-conic-0
           from-red-500 via-yellow-500 via-green-500 via-blue-500 via-purple-500 to-red-500"></div>

Image with Blend Mode

带混合模式的图片

html
<div class="w-full h-80
           bg-blue-600
           bg-[url(/img/pattern.png)] bg-cover bg-center
           bg-blend-multiply
           rounded-lg"></div>
html
<div class="w-full h-80
           bg-blue-600
           bg-[url(/img/pattern.png)] bg-cover bg-center
           bg-blend-multiply
           rounded-lg"></div>

Customization

自定义配置

Extend background utilities in your Tailwind config:
javascript
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: 'oklch(0.971 0.013 17.38)',
          500: 'oklch(0.637 0.237 25.331)',
          950: 'oklch(0.258 0.092 26.042)',
        },
      },
      backgroundImage: {
        gradient: 'url(\'/img/gradient.png\')',
      },
    },
  },
}
在Tailwind配置文件中扩展背景工具类：
javascript
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          // 自定义品牌色的OKLCH值
          50: 'oklch(0.971 0.013 17.38)',
          500: 'oklch(0.637 0.237 25.331)',
          950: 'oklch(0.258 0.092 26.042)',
        },
      },
      backgroundImage: {
        gradient: 'url(\'/img/gradient.png\')',
      },
    },
  },
}

Performance Tips

性能优化建议

  1. Use color utilities instead of hex values for better optimization
  2. Combine with 
    bg-no-repeat
     and sizing to prevent unwanted repetition
  3. Layer gradients using multiple background utilities for complex effects
  4. Use opacity modifiers (
    /50
    ) instead of rgba for better tree-shaking
  5. Prefer conic/radial gradients over images when possible for smaller file sizes
  1. 使用颜色工具类：优先使用工具类而非十六进制值，以获得更好的优化效果
  2. 结合 
    bg-no-repeat
    ：配合尺寸设置，避免不必要的图片重复
  3. 叠加渐变：使用多个背景工具类创建复杂的渐变效果
  4. 使用透明度修饰符：优先使用 
    /50
    这类修饰符而非rgba，以优化Tree-shaking
  5. 优先使用渐变而非图片：在可能的情况下，使用锥形/径向渐变替代图片，以减小文件体积