30. 背景样式

本节目标：掌握 Tailwind 中所有背景相关工具类，能实现纯色背景、渐变背景、背景图片定位和附着方式控制。

背景是页面视觉层次的基础——颜色、图片、渐变，都靠它。Tailwind 的背景工具类覆盖了各种场景，从简单的 bg-blue-500 到复杂的渐变和背景图片控制。

背景颜色

bg-{color}-{shade} 设置纯色背景：

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

特殊背景色

类名	效果
`bg-transparent`	透明
`bg-current`	继承 color 值
`bg-black`	纯黑
`bg-white`	纯白

背景透明度

<div class="bg-blue-500/50">50% 不透明度的蓝色</div>
<div class="bg-black/75">75% 不透明度的黑色遮罩</div>

背景渐变

Tailwind 的渐变工具类非常强大，不需要写 CSS 渐变代码。

渐变方向

bg-gradient-to-{direction} 控制渐变方向：

类名	方向
`bg-gradient-to-t`	从下到上
`bg-gradient-to-tr`	从左下到右上
`bg-gradient-to-r`	从左到右
`bg-gradient-to-br`	从左上到右下
`bg-gradient-to-b`	从上到下
`bg-gradient-to-bl`	从右上到左下
`bg-gradient-to-l`	从右到左
`bg-gradient-to-tl`	从右下到左上

渐变色停止点

用 from-{color}、via-{color}、to-{color} 定义渐变的起始色、中间色和结束色：

<!-- 双色渐变 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500 h-24">
  从左到右，蓝色到紫色
</div>

<!-- 三色渐变 -->
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 h-24">
  靛蓝 → 紫色 → 粉色
</div>

<!-- 对角渐变 -->
<div class="bg-gradient-to-br from-pink-500 to-orange-500 h-24">
  从左上到右下
</div>

Tip

渐变方向 + 颜色组合可以创造出非常丰富的视觉效果。bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 是经典的「Instagram 渐变」。

背景图片

背景尺寸

控制背景图片如何缩放以适应容器：

类名	效果
`bg-auto`	原始尺寸
`bg-cover`	缩放填满容器，保持比例，可能裁剪
`bg-contain`	缩放适应容器，保持比例，可能有留白

<div class="bg-cover bg-center h-64" style="background-image: url('hero.jpg')">
  <!-- 背景图片填满容器 -->
</div>

背景位置

控制背景图片在容器内的位置：

类名	效果
`bg-center`	居中
`bg-top`	顶部对齐
`bg-bottom`	底部对齐
`bg-left`	左侧对齐
`bg-right`	右侧对齐
`bg-left-top`	左上角
`bg-right-bottom`	右下角

背景重复

控制背景图片是否重复：

类名	效果
`bg-repeat`	两个方向重复
`bg-no-repeat`	不重复
`bg-repeat-x`	水平重复
`bg-repeat-y`	垂直重复

背景附着方式

控制背景图片如何随页面滚动：

类名	效果
`bg-fixed`	背景固定（相对于视口）
`bg-local`	背景随元素内容滚动
`bg-scroll`	背景随页面滚动（默认）

<!-- 视差效果：背景固定，内容滚动 -->
<div class="bg-fixed bg-cover bg-center h-screen" 
     style="background-image: url('parallax.jpg')">
  <div class="h-screen"></div>
</div>

Note

bg-fixed 在移动端可能表现不一致，需要实际测试。iOS Safari 对 background-attachment: fixed 的支持有限。

背景裁剪

bg-clip-* 控制背景的绘制区域：

类名	效果
`bg-clip-border`	绘制到边框外边缘
`bg-clip-padding`	绘制到内边距外边缘
`bg-clip-content`	只绘制到内容区域
`bg-clip-text`	文字裁剪（背景只显示在文字内）

bg-clip-text 配合渐变可以做出非常酷的渐变文字效果：

<h1 class="text-6xl font-black bg-clip-text text-transparent 
           bg-gradient-to-r from-blue-500 to-purple-500">
  渐变文字效果
</h1>

实际应用：英雄区域

<section class="relative h-96 bg-cover bg-center" 
         style="background-image: url('hero.jpg')">
  <!-- 半透明遮罩 -->
  <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 mb-8">这是一段描述文字</p>
    <button class="bg-blue-500 hover:bg-blue-600 px-6 py-3 rounded-lg">
      开始使用
    </button>
  </div>
</section>

实际应用：玻璃态卡片

<div class="relative h-64 bg-cover bg-center rounded-2xl overflow-hidden"
     style="background-image: url('background.jpg')">
  <!-- 毛玻璃卡片 -->
  <div class="absolute bottom-4 left-4 right-4 p-4 
              bg-white/10 backdrop-blur-md border border-white/20 rounded-xl">
    <h3 class="text-white font-semibold">玻璃态卡片</h3>
    <p class="text-white/80 text-sm mt-1">毛玻璃效果</p>
  </div>
</div>

实际应用：渐变按钮

<button class="bg-gradient-to-r from-purple-500 to-pink-500 
               hover:from-purple-600 hover:to-pink-600
               text-white font-semibold px-6 py-3 rounded-lg
               shadow-lg shadow-purple-500/30">
  渐变按钮
</button>

本节小结

bg-{color} → 纯色背景
bg-gradient-to-{dir} → 渐变方向
from- / via- / to- → 渐变色停止点
bg-cover / bg-contain → 背景图片尺寸
bg-center / bg-top → 背景图片位置
bg-no-repeat / bg-repeat → 背景重复
bg-fixed / bg-local / bg-scroll → 背景附着
bg-clip-text → 文字裁剪（配合渐变文字）