Tailwind CSS - 背景附件

# Tailwind CSS 现代指南：背景附件

本章介绍 Tailwind CSS 中的 background-attachment 工具类。这些类控制背景图像的位置是固定在视口内，还是随其包含块一起滚动。

## 理解背景附件工具类

可以这样理解：

• bg-fixed：背景就像是贴在显示器上的贴纸。当您滚动页面内容时，贴纸保持在原地不动。这会产生视差效果（parallax effect）。
• bg-local：背景就像是印刷在内容本身上的图案。如果内容在一个可滚动的容器内，背景会随内容一起滚动。
• bg-scroll：背景就像是容器墙壁上的图案。它不会随容器的内容滚动，但会随主浏览器窗口滚动。这是默认行为。

类名	CSS 属性	行为
bg-fixed	background-attachment: fixed;	相对于视口固定。
bg-local	background-attachment: local;	随元素的內容滚动。
bg-scroll	background-attachment: scroll;	随元素滚动，但不随其内容滚动。（默认）

## 交互式示例：比较附件行为

以下示例并排展示了这三个工具类。请在每个框内滚动并滚动主页面，以查看它们的独特行为。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Background Attachment Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* 为了演示目的，确保主页面可滚动 */
    body { height: 150vh; }
  </style>
</head>
<body class="bg-slate-100 dark:bg-slate-900 p-8 font-sans">

  <h1 class="text-3xl font-bold text-slate-900 dark:text-white mb-2 text-center">Background Attachment</h1>
  <p class="text-center text-slate-600 dark:text-slate-400 mb-8">Scroll the page and each box to see the difference.</p>

  <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto">

    <!-- 1. bg-fixed -->
    <div>
      <h2 class="font-bold text-xl mb-3 text-slate-800 dark:text-slate-200">`bg-fixed`</h2>
      <div class="h-96 w-full rounded-lg overflow-auto border-4 border-white shadow-lg bg-cover bg-center bg-fixed" style="background-image:url('https://images.unsplash.com/photo-1559128010-4492ae8e4caf?q=80&w=1974&auto=format&fit=crop')">
        <div class="p-4 text-white bg-black/50">
          <p class="font-semibold">This background is fixed to the viewport. It won't scroll with the box or the page, creating a parallax effect.</p>
          <p class="mt-40">Scroll down...</p>
        </div>
      </div>
    </div>

    <!-- 2. bg-local -->
    <div>
      <h2 class="font-bold text-xl mb-3 text-slate-800 dark:text-slate-200">`bg-local`</h2>
      <div class="h-96 w-full rounded-lg overflow-auto border-4 border-white shadow-lg bg-cover bg-center bg-local" style="background-image:url('https://images.unsplash.com/photo-1507525428034-b723a9ce6890?q=80&w=2070&auto=format&fit=crop')">
        <div class="p-4 text-white bg-black/50">
          <p class="font-semibold">This background scrolls with the content inside this box. Notice how the image moves as you scroll within this container.</p>
          <p class="mt-80">A lot of content to create scrolling...</p>
          <p class="mt-80">End of content.</p>
        </div>
      </div>
    </div>

    <!-- 3. bg-scroll（默认） -->
    <div>
      <h2 class="font-bold text-xl mb-3 text-slate-800 dark:text-slate-200">`bg-scroll`</h2>
      <div class="h-96 w-full rounded-lg overflow-auto border-4 border-white shadow-lg bg-cover bg-center bg-scroll" style="background-image:url('https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=1950&auto=format&fit=crop')">
        <div class="p-4 text-white bg-black/50">
          <p class="font-semibold">This background does not scroll with the content in the box, but it does scroll with the main page. It is fixed to the element.</p>
          <p class="mt-80">A lot of content to create scrolling...</p>
          <p class="mt-80">End of content.</p>
        </div>
      </div>
    </div>

  </div>

</body>
</html>

## 实际应用与性能

• 视差效果（Parallax Effects）：bg-fixed 是创建简单而优雅的视差滚动效果的经典选择，常用于着陆页（landing pages）。
• 样式化内容区域（Styled Content Areas）：当您希望背景图案或图像直接与可滚动 div 内的特定文本块或内容绑定时，bg-local 会很有用。
• 性能警告：尽管 bg-fixed 对于视觉效果很有用，但它可能会在某些设备（尤其是移动设备）上导致性能问题（卡顿或停顿）。浏览器需要在每次滚动事件时重新绘制背景，这可能会消耗大量资源。请谨慎使用并在目标设备上进行测试。对于复杂的动画，请考虑使用基于 JavaScript 的视差库，它们通常使用 transform 以获得更好的性能。

## 可访问性注意事项

确保放置在背景图像上的任何文本都具有足够的对比度以保证可读性。您可以使用像 bg-black/50（一个半透明的黑色背景）这样的叠加类来使图像变暗，从而提高文本的可读性，这对于可访问性（a11y）至关重要。