Tailwind CSS - 背景反转

Tailwind CSS - 背景反转（backdrop-invert）

backdrop-invert 工具类应用一个 CSS 背景滤镜，用于反转元素后面区域的颜色。这对于在半透明元素上创建有趣的视觉效果非常有用。

可用类名

Tailwind 提供了两个主要的背景反转类。

类名	CSS 属性
backdrop-invert-0	—tw-backdrop-invert: invert(0);
backdrop-invert	—tw-backdrop-invert: invert(1);

使用示例：玻璃拟态效果

背景滤镜在组合使用时效果最佳。在这里，我们将 backdrop-invert 与 backdrop-blur 和 backdrop-opacity 结合使用，创建一个现代的“玻璃拟态”卡片效果。卡片上的文本会反转其背后图像的颜色。

注意：要使背景滤镜可见，元素的背景必须是半透明的。

<div class="relative w-full h-80 flex items-center justify-center">
  <!-- Background Image -->
  <img src="/path/to/your/vibrant-image.jpg" alt="Abstract background" class="absolute inset-0 w-full h-full object-cover" />

  <!-- Glassmorphism Card -->
  <div class="relative w-72 h-40 rounded-xl bg-white/20 backdrop-blur-lg backdrop-invert shadow-lg flex items-center justify-center">
    <p class="text-2xl font-bold text-gray-800">Inverted</p>
  </div>
</div>

条件应用

你可以有条件地应用背景滤镜，例如在 hover（鼠标悬停）时。这可以创建引人入胜的微交互。

<div class="relative w-48 h-48">
  <img src="/path/to/image.jpg" class="w-full h-full object-cover" />
  <div class="absolute inset-0 bg-black/10 transition-all duration-300
              hover:backdrop-invert">
  </div>
</div>

浏览器支持与性能

背景滤镜现在已在现代浏览器中得到广泛支持，但最佳实践是始终检查 caniuse.com 以获取最新的兼容性数据。请注意，复杂的滤镜，特别是 backdrop-blur，可能会消耗大量性能，应慎重使用。