Tailwind CSS - 背景色相旋转

Tailwind CSS 现代指南：背景色相旋转（backdrop-hue-rotate）

backdrop-hue-rotate 工具类用于对元素后面的区域应用 hue-rotate 滤镜。它是功能强大的 backdrop-filter（背景滤镜）工具类套件的一部分，可以创建磨砂玻璃、颜色偏移等效果。它只对具有一定透明度的元素生效。

核心 backdrop-hue-rotate 工具类

类名	CSS 属性
backdrop-hue-rotate-0	--tw-backdrop-hue-rotate: hue-rotate(0deg);
backdrop-hue-rotate-15	--tw-backdrop-hue-rotate: hue-rotate(15deg);
backdrop-hue-rotate-30	--tw-backdrop-hue-rotate: hue-rotate(30deg);
backdrop-hue-rotate-60	--tw-backdrop-hue-rotate: hue-rotate(60deg);
backdrop-hue-rotate-90	--tw-backdrop-hue-rotate: hue-rotate(90deg);
backdrop-hue-rotate-180	--tw-backdrop-hue-rotate: hue-rotate(180deg);

实用示例：磨砂玻璃叠加层

让我们创建一个常见的 UI（用户界面）模式：图像上方的叠加层。我们将 backdrop-hue-rotate 与其他背景滤镜（如 backdrop-blur）结合使用，以实现现代外观。叠加层后面的图像颜色将发生偏移。

专业提示： 你可以通过添加负号来使用色相旋转的负值，例如 -backdrop-hue-rotate-30。这对于反转颜色偏移非常有用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
  <title>Backdrop Hue Rotate</title>
</head>
<body class="bg-slate-200 p-8">

  <h1 class="text-3xl font-bold text-center mb-8">Backdrop Filter Showcase</h1>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

    <!-- Example 1: 90 Degree Rotation -->
    <div class="relative rounded-xl overflow-hidden">
      <img src="https://picsum.photos/id/1060/400/300" alt="Colorful landscape" class="w-full h-full object-cover">
      <div class="absolute inset-0 grid place-items-center bg-black/20 backdrop-blur-sm backdrop-hue-rotate-90">
        <p class="text-white font-bold text-2xl tracking-wider">hue-rotate-90</p>
      </div>
    </div>

    <!-- Example 2: 180 Degree Rotation (Inverted Colors) -->
    <div class="relative rounded-xl overflow-hidden">
      <img src="https://picsum.photos/id/1060/400/300" alt="Colorful landscape" class="w-full h-full object-cover">
      <div class="absolute inset-0 grid place-items-center bg-black/20 backdrop-blur-sm backdrop-hue-rotate-180">
        <p class="text-white font-bold text-2xl tracking-wider">hue-rotate-180</p>
      </div>
    </div>

  </div>

  <div class="mt-12 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-800 p-4 rounded-md">
    <p class="font-bold">Browser Support & Performance</p>
    <p>Backdrop filters are not supported in all browsers (notably, older versions of Firefox required a flag). Always check caniuse.com for the latest compatibility data. Furthermore, these filters can be performance-intensive, especially when animated. Use them judiciously.</p>
  </div>

</body>
</html>

浏览器支持与性能

背景滤镜并非所有浏览器都支持（值得注意的是，旧版 Firefox 需要一个标志才能启用）。请始终访问 caniuse.com 查看最新的兼容性数据。此外，这些滤镜可能会占用大量性能，尤其是在进行动画处理时。请谨慎使用。