Tailwind CSS 背景

背景是构建 UI 视觉层次和风格的重要组成部分。Tailwind 提供了全面的工具类来控制背景颜色、渐变、图片和尺寸等。

Background Color (背景颜色)

使用 bg-{color} 工具类来设置元素的背景颜色。你可以使用 tailwind.config.js 中定义的整个调色板。

<div class="bg-sky-500 text-white p-4">
  这是一个蓝色背景的 div。
</div>

<button class="bg-emerald-500 hover:bg-emerald-600 ...">
  一个绿色按钮
</button>

你还可以使用 bg-opacity-{amount} 来控制背景颜色的不透明度。

<div class="bg-blue-500 bg-opacity-75 ...">...</div>

Gradient Colors (渐变色)

Tailwind 让你能够轻松创建平滑的颜色渐变。你需要组合使用三个工具类：

1. 定义渐变方向: bg-gradient-to-{direction}

   • bg-gradient-to-t: 到顶部 (to top)
   • bg-gradient-to-br: 到右下角 (to bottom right)
   • bg-gradient-to-r: 到右侧 (to right) (默认)

2. 定义起始颜色: from-{color}

3. 定义结束颜色: to-{color}

4. (可选) 定义中间颜色: via-{color}

<!-- 一个从紫色到粉色的渐变 -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500 h-24"></div>

<!-- 一个三色渐变 -->
<div class="bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 h-24"></div>

Background Image (背景图片)

你可以使用 bg-[url(...)] 这样的任意值来设置背景图片。

<div class="bg-[url('/img/hero-pattern.svg')] h-48">
  <!-- ... -->
</div>

Background Size, Position, and Repeat

当使用背景图片时，你通常需要控制它的尺寸、位置和重复方式。

• Background Size: bg-{size}

  • bg-auto: (默认)
  • bg-cover: 缩放图片以完全覆盖元素，可能会裁剪图片。
  • bg-contain: 缩放图片以完全容纳在元素内，可能会留有空白。

• Background Position: bg-{position}

  • bg-center: 居中
  • bg-top: 顶部对齐
  • bg-left-bottom: 左下角对齐

• Background Repeat: bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y

<div
  class="bg-[url('/img/image.jpg')] bg-cover bg-center bg-no-repeat h-64 rounded-lg"
>
  <!-- 一个常见的卡片背景图设置 -->
</div>

通过这些背景工具类的组合，你可以为你的网站和组件创造出丰富多彩、富有吸引力的视觉效果。