Skip to content
W3S101

Tailwind CSS - 不透明度

Tailwind CSS：精通不透明度 (Opacity)

Section titled “Tailwind CSS：精通不透明度 (Opacity)”

Tailwind CSS 中的 opacity 工具类允许你控制任何元素的不透明度。它是样式化 UI 状态（如悬停效果、焦点指示器、禁用元素）以及通过层叠元素创建深度的一个基础工具。

现代开发注意事项： 虽然这里的示例为了简单起见是自包含的，但现代的 Tailwind CSS 设置会使用像 Vite 或 Next.js 这样的构建工具以及一个 tailwind.config.js 文件。Just-In-Time (JIT) 引擎（现在是 Tailwind CSS v3+ 的默认设置）会自动生成你所使用的 CSS，从而产生高度优化的生产构建。

核心不透明度工具类

Section titled “核心不透明度工具类”

Tailwind 提供了一套全面的开箱即用的不透明度类，范围从 opacity-0（完全透明）到 opacity-100（完全不透明）。以下是默认工具类的列表：

类名CSS 属性
opacity-0opacity: 0;
opacity-5opacity: 0.05;
opacity-10opacity: 0.1;
opacity-20opacity: 0.2;
opacity-25opacity: 0.25;
opacity-30opacity: 0.3;
opacity-40opacity: 0.4;
opacity-50opacity: 0.5;
opacity-60opacity: 0.6;
opacity-75opacity: 0.75;
opacity-80opacity: 0.8;
opacity-90opacity: 0.9;
opacity-95opacity: 0.95;
opacity-100opacity: 1;

任意值： 对于自定义不透明度值，你可以使用方括号表示法，例如 opacity-[.42]，它将被编译为 opacity: 0.42;。这是 Tailwind 的 JIT 引擎的一个强大功能。

交互式与响应式不透明度

Section titled “交互式与响应式不透明度”

不透明度工具类可以使用状态变体（如 hover:、focus:、disabled:）和响应式断点（如 md: 或 lg:）有条件地应用。这对于创建动态且可访问的用户界面至关重要。

示例：交互式按钮状态

Section titled “示例：交互式按钮状态”

此示例演示了如何使用不透明度来样式化按钮的不同状态，包括在视觉和功能上都处于惰性状态的禁用状态。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Opacity Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 dark:bg-slate-900 flex items-center justify-center min-h-screen">


  <div class="p-8 space-y-4">
    <!-- Default button with hover effect -->
    <button class="px-6 py-3 font-semibold text-white bg-indigo-600 rounded-lg shadow-md hover:opacity-80 transition-opacity duration-300">
      Hover Me
    </button>


    <!-- Disabled button with accessibility attributes -->
    <button
      disabled
      class="px-6 py-3 font-semibold text-white bg-indigo-600 rounded-lg shadow-md opacity-50 cursor-not-allowed"
      aria-disabled="true">
      Disabled
    </button>
  </div>


</body>
</html>

实际应用与最佳实践

Section titled “实际应用与最佳实践”
  • 模态框覆盖层（Modal Overlays）： 在背景 div 上使用半透明 opacity 来使模态框后面的页面内容变暗（例如 bg-black opacity-50）。
  • 图片覆盖层： 在图片上方放置一个带有背景色和部分不透明度的 div，以创建文本对比度。
  • 淡入/淡出： 将 opacity 与过渡工具类（transition-opacity、duration-500）结合使用，以实现平滑的淡入淡出效果。

可访问性（a11y）焦点

Section titled “可访问性（a11y）焦点”

当使用不透明度来表示禁用状态时，添加能够以编程方式禁用元素的属性至关重要。仅仅降低不透明度不足以满足屏幕阅读器的需求。

  • 对于按钮： 使用 disabled 属性。
  • 对于链接或自定义组件： 使用 aria-disabled="true" 和 pointer-events-none 来阻止点击。

自定义主题

Section titled “自定义主题”

你可以通过编辑 tailwind.config.js 文件中的 opacity 比例尺，将自己的不透明度值添加到主题中。

// tailwind.config.js 文件
module.exports = {
  theme: {
    extend: {
      opacity: {
        '15': '0.15',
        '35': '0.35',
        '65': '0.65',
      }
    }
  }
}