跳到主要内容

背景与渐变

背景是网页设计中最重要的视觉元素之一。Tailwind CSS 提供了丰富的背景工具类，包括背景颜色、背景图片、渐变效果等。本章将详细介绍如何使用这些工具类创建精美的背景效果。

背景颜色​

基本用法​

使用 bg-{color}-{shade} 设置背景颜色：

<div class="bg-white p-4">白色背景</div>
<div class="bg-gray-100 p-4">浅灰背景</div>
<div class="bg-blue-500 p-4 text-white">蓝色背景</div>
<div class="bg-red-500 p-4 text-white">红色背景</div>

背景透明度​

使用斜杠语法设置背景颜色透明度：

<div class="bg-blue-500/50 p-4">50% 透明度</div>
<div class="bg-blue-500/75 p-4">75% 透明度</div>
<div class="bg-blue-500/90 p-4">90% 透明度</div>

也可以使用任意值：

<div class="bg-blue-500/[0.25]">25% 透明度</div>
<div class="bg-blue-500/[71.37%]">71.37% 透明度</div>

背景继承​

<div class="bg-inherit">继承父元素背景</div>
<div class="bg-current">使用当前颜色作为背景</div>
<div class="bg-transparent">透明背景</div>

渐变效果​

Tailwind CSS v4 提供了强大的渐变工具类，支持线性渐变、径向渐变和锥形渐变。

线性渐变​

使用 bg-linear-to-{direction} 设置渐变方向，配合 from-{color}、via-{color}、to-{color} 设置颜色：

渐变方向：

类名方向
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向左上

基本渐变：

<!-- 从左到右的渐变 -->
<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>

指定角度：

使用 bg-linear-{angle} 指定精确角度：

<!-- 65度角渐变 -->
<div class="h-14 bg-linear-65 from-purple-500 to-pink-500"></div>

<!-- 135度角渐变 -->
<div class="h-14 bg-linear-135 from-blue-500 to-teal-500"></div>

渐变色标​

双色渐变：

<div class="h-14 bg-linear-to-r from-blue-500 to-purple-500"></div>

三色渐变：

使用 via-{color} 添加中间色：

<div class="h-14 bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

指定色标位置：

使用 from-{position}、via-{position}、to-{position} 精确控制颜色位置：

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

径向渐变​

使用 bg-radial 创建从中心向外扩散的渐变：

<!-- 基本径向渐变 -->
<div class="size-24 rounded-full bg-radial from-pink-400 from-40% to-fuchsia-700"></div>

<!-- 指定渐变中心位置 -->
<div class="size-24 rounded-full bg-radial-[at_50%_75%] from-sky-200 via-blue-400 to-indigo-900 to-90%"></div>

<!-- 左上角为中心 -->
<div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

锥形渐变​

使用 bg-conic 创建围绕中心点旋转的渐变：

<!-- 基本锥形渐变 -->
<div class="size-24 rounded-full bg-conic from-blue-600 to-sky-400 to-50%"></div>

<!-- 180度起始 -->
<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>

渐变插值模式​

使用修饰符控制渐变的颜色插值方式：

<!-- sRGB 插值（传统） -->
<div class="h-14 bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div>

<!-- HSL 插值 -->
<div class="h-14 bg-linear-to-r/hsl from-indigo-500 to-teal-400"></div>

<!-- OKLAB 插值（默认） -->
<div class="h-14 bg-linear-to-r/oklab from-indigo-500 to-teal-400"></div>

<!-- OKLCH 插值 -->
<div class="h-14 bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div>

插值模式说明：

模式说明
srgb传统 sRGB 颜色空间插值
hslHSL 颜色空间插值，色相平滑过渡
oklabOKLAB 颜色空间，感知均匀（默认）
oklchOKLCH 颜色空间，更鲜艳的颜色
longer色相长路径插值
shorter色相短路径插值
increasing色相递增插值
decreasing色相递减插值

背景图片​

设置背景图片​

使用 bg-[url(...)] 语法设置背景图片：

<div class="bg-[url('/img/mountains.jpg')] bg-cover bg-center h-64">
  背景图片
</div>

移除背景图片​

<div class="bg-none">无背景图片</div>

使用 CSS 变量​

<div class="bg-(image:--my-background-image)">使用 CSS 变量</div>

背景大小​

控制背景图片的尺寸：

<div class="bg-auto">自动大小</div>
<div class="bg-cover">覆盖容器（保持比例）</div>
<div class="bg-contain">包含在容器内（保持比例）</div>

bg-cover 和 bg-contain 的区别：

  • bg-cover：图片会缩放以完全覆盖容器，可能会裁剪部分内容
  • bg-contain：图片会缩放以完全显示在容器内，可能会留白

背景位置​

控制背景图片的位置：

<div class="bg-bottom">底部对齐</div>
<div class="bg-center">居中对齐</div>
<div class="bg-left">左对齐</div>
<div class="bg-right">右对齐</div>
<div class="bg-top">顶部对齐</div>

<!-- 组合位置 -->
<div class="bg-left-top">左上角</div>
<div class="bg-right-bottom">右下角</div>

任意位置值​

<div class="bg-[center_top_1rem]">自定义位置</div>
<div class="bg-[right_2rem_bottom_1rem]">右下偏移</div>

背景重复​

控制背景图片的重复方式：

<div class="bg-repeat">重复（默认）</div>
<div class="bg-no-repeat">不重复</div>
<div class="bg-repeat-x">水平重复</div>
<div class="bg-repeat-y">垂直重复</div>
<div class="bg-repeat-round">整数次重复</div>
<div class="bg-repeat-space">等间距重复</div>

背景附着​

控制背景图片随滚动的方式：

<div class="bg-fixed">固定背景（不随滚动）</div>
<div class="bg-local">随内容滚动</div>
<div class="bg-scroll">随元素滚动（默认）</div>

背景裁剪​

控制背景的绘制区域：

<div class="bg-clip-border">裁剪到边框（默认）</div>
<div class="bg-clip-padding">裁剪到内边距</div>
<div class="bg-clip-content">裁剪到内容区域</div>
<div class="bg-clip-text">裁剪到文字（文字遮罩效果）</div>

文字遮罩效果：

<div class="bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent text-4xl font-bold">
  渐变文字效果
</div>

背景原点​

控制背景的定位区域：

<div class="bg-origin-border">从边框开始</div>
<div class="bg-origin-padding">从内边距开始（默认）</div>
<div class="bg-origin-content">从内容区域开始</div>

实战示例​

渐变按钮​

<button class="bg-linear-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white font-semibold px-6 py-3 rounded-lg shadow-lg transition-all duration-300">
  渐变按钮
</button>

渐变卡片​

<div class="bg-linear-to-br from-white to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-2xl shadow-xl p-8">
  <h3 class="text-xl font-bold mb-4">渐变卡片</h3>
  <p class="text-gray-600 dark:text-gray-300">
    这是一张带有微妙渐变背景的卡片，在暗黑模式下会自动切换颜色。
  </p>
</div>

毛玻璃效果​

<div class="bg-white/30 backdrop-blur-lg border border-white/20 rounded-xl p-6 shadow-xl">
  <h3 class="text-xl font-bold">毛玻璃效果</h3>
  <p class="mt-2">使用背景透明度和背景模糊组合实现</p>
</div>

英雄区域背景​

<div class="relative h-screen bg-[url('/img/hero.jpg')] bg-cover bg-center">
  <!-- 遮罩层 -->
  <div class="absolute inset-0 bg-black/50"></div>
  
  <!-- 内容 -->
  <div class="relative z-10 flex flex-col items-center justify-center h-full text-white">
    <h1 class="text-5xl font-bold mb-4">欢迎访问</h1>
    <p class="text-xl">精美的全屏背景效果</p>
  </div>
</div>

网格背景​

<div class="bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]">
  <div class="p-8">
    网格背景效果
  </div>
</div>

点状背景​

<div class="bg-[radial-gradient(circle,#00000012_1px,transparent_1px)] bg-[size:16px_16px]">
  <div class="p-8">
    点状背景效果
  </div>
</div>

渐变边框​

<div class="relative p-[2px] rounded-lg bg-linear-to-r from-pink-500 via-purple-500 to-blue-500">
  <div class="bg-white dark:bg-gray-900 rounded-lg p-6">
    <h3 class="font-bold">渐变边框效果</h3>
    <p class="text-gray-600 mt-2">使用渐变背景和内边距实现</p>
  </div>
</div>

彩虹渐变​

<div class="h-4 bg-linear-to-r from-red-500 via-yellow-500 via-green-500 via-blue-500 to-purple-500 rounded-full"></div>

动态渐变​

<div class="h-32 bg-[linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1,#96e6a1,#dfe6e9,#ff6b6b)] bg-[length:400%_400%] animate-[gradient_8s_ease_infinite]">
  动态渐变背景
</div>

配合自定义动画：

@keyframes gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

小结​

本章介绍了 Tailwind CSS 的背景工具类：

  • 背景颜色：使用 bg-{color} 设置纯色背景，支持透明度
  • 线性渐变：使用 bg-linear-to-{direction} 配合颜色色标
  • 径向渐变：使用 bg-radial 创建从中心扩散的渐变
  • 锥形渐变：使用 bg-conic 创建旋转渐变效果
  • 背景图片：控制大小、位置、重复、附着等
  • 背景裁剪：使用 bg-clip-text 创建渐变文字效果
  • 插值模式：使用 OKLAB、OKLCH 等现代颜色空间

下一章，我们将学习边框和分割线的使用方法。