English 中文 العربية 日本語 Português

Tailwind CSS: Tailwind CSS 滤镜与变换：模糊、缩放、旋转与位移

1. 滤镜（filter）

滤镜类使用 CSS filter 属性，为元素添加视觉效果。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滤镜演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- blur 模糊 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">blur 模糊</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-0" class="rounded-lg blur-0">
          <p class="text-sm mt-2">blur-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-sm" class="rounded-lg blur-sm">
          <p class="text-sm mt-2">blur-sm</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur" class="rounded-lg blur">
          <p class="text-sm mt-2">blur</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-md" class="rounded-lg blur-md">
          <p class="text-sm mt-2">blur-md</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-lg" class="rounded-lg blur-lg">
          <p class="text-sm mt-2">blur-lg</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-xl" class="rounded-lg blur-xl">
          <p class="text-sm mt-2">blur-xl</p>
        </div>
      </div>
    </div>

    <!-- brightness 亮度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">brightness 亮度</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-50" class="rounded-lg brightness-50">
          <p class="text-sm mt-2">brightness-50</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-75" class="rounded-lg brightness-75">
          <p class="text-sm mt-2">brightness-75</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-100" class="rounded-lg brightness-100">
          <p class="text-sm mt-2">brightness-100</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-125" class="rounded-lg brightness-125">
          <p class="text-sm mt-2">brightness-125</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-150" class="rounded-lg brightness-150">
          <p class="text-sm mt-2">brightness-150</p>
        </div>
      </div>
    </div>

    <!-- contrast 对比度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">contrast 对比度</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-50" class="rounded-lg contrast-50">
          <p class="text-sm mt-2">contrast-50</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-100" class="rounded-lg contrast-100">
          <p class="text-sm mt-2">contrast-100</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-150" class="rounded-lg contrast-150">
          <p class="text-sm mt-2">contrast-150</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-200" class="rounded-lg contrast-200">
          <p class="text-sm mt-2">contrast-200</p>
        </div>
      </div>
    </div>

    <!-- grayscale 灰度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grayscale 灰度</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="grayscale-0" class="rounded-lg grayscale-0">
          <p class="text-sm mt-2">grayscale-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="grayscale" class="rounded-lg grayscale">
          <p class="text-sm mt-2">grayscale</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="grayscale-50" class="rounded-lg grayscale-[50%]">
          <p class="text-sm mt-2">grayscale-50%</p>
        </div>
      </div>
    </div>

    <!-- sepia 褐色 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">sepia 褐色</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="sepia-0" class="rounded-lg sepia-0">
          <p class="text-sm mt-2">sepia-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="sepia" class="rounded-lg sepia">
          <p class="text-sm mt-2">sepia</p>
        </div>
      </div>
    </div>

    <!-- saturate 饱和度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">saturate 饱和度</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-0" class="rounded-lg saturate-0">
          <p class="text-sm mt-2">saturate-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-50" class="rounded-lg saturate-50">
          <p class="text-sm mt-2">saturate-50</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-100" class="rounded-lg saturate-100">
          <p class="text-sm mt-2">saturate-100</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-150" class="rounded-lg saturate-150">
          <p class="text-sm mt-2">saturate-150</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-200" class="rounded-lg saturate-200">
          <p class="text-sm mt-2">saturate-200</p>
        </div>
      </div>
    </div>

    <!-- hue-rotate 色相旋转 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">hue-rotate 色相旋转</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="hue-rotate-0" class="rounded-lg hue-rotate-0">
          <p class="text-sm mt-2">hue-rotate-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="hue-rotate-90" class="rounded-lg hue-rotate-90">
          <p class="text-sm mt-2">hue-rotate-90</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="hue-rotate-180" class="rounded-lg hue-rotate-180">
          <p class="text-sm mt-2">hue-rotate-180</p>
        </div>
      </div>
    </div>

    <!-- invert 反转 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">invert 反转</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="invert-0" class="rounded-lg invert-0">
          <p class="text-sm mt-2">invert-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="invert" class="rounded-lg invert">
          <p class="text-sm mt-2">invert</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 173 行（超过 40 行限制，仅展示）

滤镜类名对照：

类名 CSS 值 说明
blur-0 filter: blur(0) 无模糊
blur-sm filter: blur(4px) 小模糊
blur filter: blur(8px) 默认模糊
blur-md filter: blur(12px) 中等模糊
blur-lg filter: blur(16px) 大模糊
blur-xl filter: blur(24px) 超大模糊
blur-2xl filter: blur(40px) 超大模糊
blur-3xl filter: blur(64px) 超大模糊
brightness-0 filter: brightness(0) 完全黑
brightness-50 filter: brightness(0.5) 50%亮度
brightness-100 filter: brightness(1) 100%亮度（默认）
brightness-150 filter: brightness(1.5) 150%亮度
contrast-0 filter: contrast(0) 无对比度
contrast-50 filter: contrast(0.5) 50%对比度
contrast-100 filter: contrast(1) 100%对比度（默认）
contrast-200 filter: contrast(2) 200%对比度
grayscale-0 filter: grayscale(0) 无灰度
grayscale filter: grayscale(100%) 完全灰度
sepia-0 filter: sepia(0) 无褐色
sepia filter: sepia(100%) 完全褐色
saturate-0 filter: saturate(0) 无饱和度
saturate-50 filter: saturate(0.5) 50%饱和度
saturate-100 filter: saturate(1) 100%饱和度（默认）
saturate-200 filter: saturate(2) 200%饱和度
hue-rotate-0 filter: hue-rotate(0deg) 无色相旋转
hue-rotate-90 filter: hue-rotate(90deg) 90度色相旋转
hue-rotate-180 filter: hue-rotate(180deg) 180度色相旋转
invert-0 filter: invert(0) 无反转
invert filter: invert(100%) 完全反转

传统 CSS vs Tailwind 传统方式需要在 CSS 中编写 filter: blur(8px) brightness(1.2) 等复杂属性，而 Tailwind 使用 blur、brightness-120 等类名直接声明。

💡 提示： 滤镜可以组合使用，如 blur-sm brightness-75 grayscale。注意滤镜顺序会影响最终效果。

2. 变换（transform）

变换类使用 CSS transform 属性，对元素进行缩放、旋转、位移和倾斜。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>变换演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- scale 缩放 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">scale 缩放</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-50 flex items-center justify-center text-white text-xs">scale-50</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-75 flex items-center justify-center text-white text-xs">scale-75</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-100 flex items-center justify-center text-white text-xs">scale-100</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-110 flex items-center justify-center text-white text-xs">scale-110</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-125 flex items-center justify-center text-white text-xs">scale-125</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-150 flex items-center justify-center text-white text-xs">scale-150</div>
      </div>
    </div>

    <!-- rotate 旋转 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">rotate 旋转</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-0 flex items-center justify-center text-white text-xs">rotate-0</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-3 flex items-center justify-center text-white text-xs">rotate-3</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-6 flex items-center justify-center text-white text-xs">rotate-6</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-12 flex items-center justify-center text-white text-xs">rotate-12</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-45 flex items-center justify-center text-white text-xs">rotate-45</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-90 flex items-center justify-center text-white text-xs">rotate-90</div>
      </div>
    </div>

    <!-- translate 位移 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">translate 位移</h3>
      <div class="relative h-48 bg-gray-100 rounded-lg">
        <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 bg-purple-500 rounded-lg flex items-center justify-center text-white text-xs">居中</div>
        <div class="absolute left-4 top-4 w-20 h-20 bg-purple-400 rounded-lg translate-x-0 translate-y-0 flex items-center justify-center text-white text-xs">原位</div>
        <div class="absolute left-4 top-4 w-20 h-20 bg-purple-600 rounded-lg translate-x-8 translate-y-8 flex items-center justify-center text-white text-xs">+8</div>
        <div class="absolute right-4 top-4 w-20 h-20 bg-purple-700 rounded-lg -translate-x-4 translate-y-4 flex items-center justify-center text-white text-xs">-4,+4</div>
      </div>
    </div>

    <!-- skew 倾斜 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">skew 倾斜</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-0 flex items-center justify-center text-white text-xs">skew-x-0</div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-3 flex items-center justify-center text-white text-xs">skew-x-3</div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-6 flex items-center justify-center text-white text-xs">skew-x-6</div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-12 flex items-center justify-center text-white text-xs">skew-x-12</div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 53 行（超过 40 行限制，仅展示）

变换类名对照：

类名 CSS 值 说明
scale-0 transform: scale(0) 缩放到 0
scale-50 transform: scale(0.5) 缩放到 50%
scale-75 transform: scale(0.75) 缩放到 75%
scale-90 transform: scale(0.9) 缩放到 90%
scale-95 transform: scale(0.95) 缩放到 95%
scale-100 transform: scale(1) 原始大小（默认）
scale-105 transform: scale(1.05) 缩放到 105%
scale-110 transform: scale(1.1) 缩放到 110%
scale-125 transform: scale(1.25) 缩放到 125%
scale-150 transform: scale(1.5) 缩放到 150%
rotate-0 transform: rotate(0deg) 不旋转
rotate-1 transform: rotate(1deg) 旋转 1 度
rotate-2 transform: rotate(2deg) 旋转 2 度
rotate-3 transform: rotate(3deg) 旋转 3 度
rotate-6 transform: rotate(6deg) 旋转 6 度
rotate-12 transform: rotate(12deg) 旋转 12 度
rotate-45 transform: rotate(45deg) 旋转 45 度
rotate-90 transform: rotate(90deg) 旋转 90 度
rotate-180 transform: rotate(180deg) 旋转 180 度
translate-x-0 transform: translateX(0) 水平不位移
translate-x-1 transform: translateX(0.25rem) 水平位移 4px
translate-x-2 transform: translateX(0.5rem) 水平位移 8px
translate-x-4 transform: translateX(1rem) 水平位移 16px
translate-x-full transform: translateX(100%) 水平位移 100%
-translate-x-1/2 transform: translateX(-50%) 水平位移 -50%
translate-y-0 transform: translateY(0) 垂直不位移
translate-y-1 transform: translateY(0.25rem) 垂直位移 4px
translate-y-full transform: translateY(100%) 垂直位移 100%
-translate-y-1/2 transform: translateY(-50%) 垂直位移 -50%
skew-x-0 transform: skewX(0deg) 不倾斜
skew-x-1 transform: skewX(1deg) 水平倾斜 1 度
skew-x-3 transform: skewX(3deg) 水平倾斜 3 度
skew-x-6 transform: skewX(6deg) 水平倾斜 6 度
skew-x-12 transform: skewX(12deg) 水平倾斜 12 度
skew-y-0 transform: skewY(0deg) 不倾斜
skew-y-1 transform: skewY(1deg) 垂直倾斜 1 度
skew-y-3 transform: skewY(3deg) 垂直倾斜 3 度
skew-y-6 transform: skewY(6deg) 垂直倾斜 6 度
skew-y-12 transform: skewY(12deg) 垂直倾斜 12 度

传统 CSS vs Tailwind 传统方式需要在 CSS 中编写 transform: scale(1.1) rotate(3deg) 等复杂属性，而 Tailwind 使用 scale-110 rotate-3 等类名直接声明。负值使用 -translate-x-1/2 语法。

💡 提示： -translate-x-1/2 -translate-y-1/2 配合 left-1/2 top-1/2 可以实现完美的水平垂直居中。

3. 变换原点（origin-*）

origin-* 类设置变换的原点位置。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>变换原点演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 原点位置 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">变换原点</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="text-center">
          <div class="w-24 h-24 bg-blue-500 rounded-lg rotate-45 origin-center flex items-center justify-center text-white text-xs">origin-center</div>
          <p class="text-sm mt-2">center（默认）</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-green-500 rounded-lg rotate-45 origin-top-left flex items-center justify-center text-white text-xs">origin-top</div>
          <p class="text-sm mt-2">origin-top-left</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-purple-500 rounded-lg rotate-45 origin-top-right flex items-center justify-center text-white text-xs">origin-top</div>
          <p class="text-sm mt-2">origin-top-right</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-orange-500 rounded-lg rotate-45 origin-bottom-left flex items-center justify-center text-white text-xs">origin-bottom</div>
          <p class="text-sm mt-2">origin-bottom-left</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-red-500 rounded-lg rotate-45 origin-bottom-right flex items-center justify-center text-white text-xs">origin-bottom</div>
          <p class="text-sm mt-2">origin-bottom-right</p>
        </div>
      </div>
    </div>

    <!-- 实际应用 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">实际应用：旋转动画</h3>
      <div class="flex gap-8 items-center justify-center">
        <div class="text-center">
          <div class="w-16 h-16 bg-blue-500 rounded-lg hover:rotate-45 origin-center transition-transform duration-300 flex items-center justify-center text-white cursor-pointer">
            中心
          </div>
        </div>
        <div class="text-center">
          <div class="w-16 h-16 bg-green-500 rounded-lg hover:rotate-45 origin-top-left transition-transform duration-300 flex items-center justify-center text-white cursor-pointer">
            左上
          </div>
        </div>
        <div class="text-center">
          <div class="w-16 h-16 bg-purple-500 rounded-lg hover:rotate-45 origin-bottom-right transition-transform duration-300 flex items-center justify-center text-white cursor-pointer">
            右下
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 58 行（超过 40 行限制，仅展示）

变换原点类名对照：

类名 CSS 值 说明
origin-center transform-origin: center 中心（默认）
origin-top transform-origin: top 顶部中心
origin-top-right transform-origin: top right 右上角
origin-right transform-origin: right 右侧中心
origin-bottom-right transform-origin: bottom right 右下角
origin-bottom transform-origin: bottom 底部中心
origin-bottom-left transform-origin: bottom left 左下角
origin-left transform-origin: left 左侧中心
origin-top-left transform-origin: top left 左上角

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 transform-origin 属性，而 Tailwind 使用 origin-center、origin-top-left 等类名直接声明。

💡 提示： 变换原点影响旋转和缩放的基准点。origin-top-left 让元素从左上角开始旋转，origin-center 从中心开始。

4. 背景滤镜（backdrop-*）

backdrop-* 类使用 CSS backdrop-filter 属性，对元素背后的内容应用滤镜效果。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景滤镜演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- backdrop-blur 背景模糊 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">backdrop-blur 背景模糊</h3>
      <div class="relative h-48 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/400/200'); background-size: cover;">
        <div class="absolute inset-0 flex items-center justify-center gap-4">
          <div class="bg-white/30 backdrop-blur-sm px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-sm</div>
          </div>
          <div class="bg-white/30 backdrop-blur px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur</div>
          </div>
          <div class="bg-white/30 backdrop-blur-md px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-md</div>
          </div>
          <div class="bg-white/30 backdrop-blur-lg px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-lg</div>
          </div>
          <div class="bg-white/30 backdrop-blur-xl px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-xl</div>
          </div>
        </div>
      </div>
    </div>

    <!-- backdrop-brightness 背景亮度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">backdrop-brightness 背景亮度</h3>
      <div class="relative h-48 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/400/200'); background-size: cover;">
        <div class="absolute inset-0 flex items-center justify-center gap-4">
          <div class="bg-black/30 backdrop-brightness-50 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-50</div>
          </div>
          <div class="bg-black/30 backdrop-brightness-75 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-75</div>
          </div>
          <div class="bg-black/30 backdrop-brightness-100 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-100</div>
          </div>
          <div class="bg-black/30 backdrop-brightness-125 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-125</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 实际应用：毛玻璃效果 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">实际应用：毛玻璃效果</h3>
      <div class="relative h-64 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/600/300'); background-size: cover;">
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="bg-white/20 backdrop-blur-lg rounded-2xl p-8 text-center shadow-xl">
            <h4 class="text-2xl font-bold text-white mb-2">毛玻璃效果</h4>
            <p class="text-white/80">使用 backdrop-blur-lg 实现</p>
            <button class="mt-4 bg-white/30 hover:bg-white/50 text-white px-6 py-2 rounded-full transition-colors">
              立即体验
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 实际应用：模态框背景 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">实际应用：模态框背景</h3>
      <div class="relative h-64 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/600/300'); background-size: cover;">
        <!-- 模拟模态框遮罩 -->
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
        <!-- 模态框内容 -->
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="bg-white rounded-xl p-6 w-80 shadow-2xl">
            <h4 class="text-xl font-semibold mb-2">模态框</h4>
            <p class="text-gray-600 mb-4">背景使用 backdrop-blur-sm 实现模糊效果</p>
            <div class="flex justify-end gap-3">
              <button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded">取消</button>
              <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">确认</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 84 行（超过 40 行限制，仅展示）

背景滤镜类名对照：

类名 CSS 值 说明
backdrop-blur-0 backdrop-filter: blur(0) 无背景模糊
backdrop-blur-sm backdrop-filter: blur(4px) 小背景模糊
backdrop-blur backdrop-filter: blur(8px) 默认背景模糊
backdrop-blur-md backdrop-filter: blur(12px) 中等背景模糊
backdrop-blur-lg backdrop-filter: blur(16px) 大背景模糊
backdrop-blur-xl backdrop-filter: blur(24px) 超大背景模糊
backdrop-blur-2xl backdrop-filter: blur(40px) 超大背景模糊
backdrop-blur-3xl backdrop-filter: blur(64px) 超大背景模糊
backdrop-brightness-0 backdrop-filter: brightness(0) 完全黑背景
backdrop-brightness-50 backdrop-filter: brightness(0.5) 50%背景亮度
backdrop-brightness-100 backdrop-filter: brightness(1) 100%背景亮度
backdrop-brightness-150 backdrop-filter: brightness(1.5) 150%背景亮度
backdrop-contrast-0 backdrop-filter: contrast(0) 无背景对比度
backdrop-contrast-100 backdrop-filter: contrast(1) 100%背景对比度
backdrop-grayscale-0 backdrop-filter: grayscale(0) 无背景灰度
backdrop-grayscale backdrop-filter: grayscale(100%) 完全背景灰度
backdrop-hue-rotate-0 backdrop-filter: hue-rotate(0deg) 无背景色相旋转
backdrop-hue-rotate-90 backdrop-filter: hue-rotate(90deg) 90度背景色相旋转
backdrop-invert-0 backdrop-filter: invert(0) 无背景反转
backdrop-invert backdrop-filter: invert(100%) 完全背景反转
backdrop-opacity-0 backdrop-filter: opacity(0) 完全透明背景
backdrop-opacity-50 backdrop-filter: opacity(0.5) 50%背景透明度
backdrop-opacity-100 backdrop-filter: opacity(1) 100%背景透明度
backdrop-saturate-0 backdrop-filter: saturate(0) 无背景饱和度
backdrop-saturate-100 backdrop-filter: saturate(1) 100%背景饱和度
backdrop-saturate-200 backdrop-filter: saturate(2) 200%背景饱和度
backdrop-sepia-0 backdrop-filter: sepia(0) 无背景褐色
backdrop-sepia backdrop-filter: sepia(100%) 完全背景褐色

传统 CSS vs Tailwind 传统方式需要在 CSS 中编写 backdrop-filter: blur(16px) brightness(0.8) 等复杂属性，而 Tailwind 使用 backdrop-blur-lg backdrop-brightness-75 等类名直接声明。

⚠️ 注意： backdrop-filter 需要元素有背景透明度才能看到效果。通常配合 bg-white/20 或 bg-black/50 使用。部分浏览器需要 -webkit- 前缀。

5. 综合示例

结合以上所有知识点，创建一个完整的滤镜与变换示例。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滤镜与变换综合示例</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 图片画廊 -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">图片画廊（滤镜效果）</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=1" alt="原图" class="rounded-lg w-full group-hover:scale-105 transition-transform duration-300">
          <p class="text-sm text-center mt-2">原图</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=2" alt="灰度" class="rounded-lg w-full grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-300">
          <p class="text-sm text-center mt-2">灰度 → 彩色</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=3" alt="褐色" class="rounded-lg w-full sepia group-hover:sepia-0 group-hover:scale-105 transition-all duration-300">
          <p class="text-sm text-center mt-2">褐色 → 彩色</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=4" alt="模糊" class="rounded-lg w-full blur-sm group-hover:blur-0 group-hover:scale-105 transition-all duration-300">
          <p class="text-sm text-center mt-2">模糊 → 清晰</p>
        </div>
      </div>
    </div>

    <!-- 卡片悬停效果 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=5" alt="卡片" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-4 left-4 text-white">
            <h4 class="font-semibold">缩放效果</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">悬停时图片放大</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=6" alt="卡片" class="w-full h-full object-cover group-hover:rotate-3 transition-transform duration-500 origin-center">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-4 left-4 text-white">
            <h4 class="font-semibold">旋转效果</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">悬停时图片旋转</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=7" alt="卡片" class="w-full h-full object-cover group-hover:brightness-125 transition-all duration-500">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-4 left-4 text-white">
            <h4 class="font-semibold">亮度效果</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">悬停时亮度增加</p>
        </div>
      </div>
    </div>

    <!-- 毛玻璃导航栏 -->
    <div class="relative h-96 rounded-xl overflow-hidden" style="background-image: url('https://picsum.photos/800/400'); background-size: cover; background-position: center;">
      <!-- 导航栏 -->
      <nav class="absolute top-0 left-0 right-0 bg-white/10 backdrop-blur-lg border-b border-white/20">
        <div class="flex justify-between items-center px-6 py-4">
          <div class="text-white font-bold text-xl">Logo</div>
          <div class="flex gap-6">
            <a href="#" class="text-white/80 hover:text-white transition-colors">首页</a>
            <a href="#" class="text-white/80 hover:text-white transition-colors">产品</a>
            <a href="#" class="text-white/80 hover:text-white transition-colors">关于</a>
          </div>
        </div>
      </nav>
      <!-- 内容 -->
      <div class="absolute inset-0 flex items-center justify-center">
        <div class="text-center text-white">
          <h2 class="text-4xl font-bold mb-4 drop-shadow-lg">毛玻璃效果</h2>
          <p class="text-xl opacity-90 drop-shadow">使用 backdrop-blur-lg 实现</p>
        </div>
      </div>
    </div>

    <!-- 变换组合 -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">变换组合</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-110 rotate-6 shadow-lg flex items-center justify-center text-white text-xs">
          scale + rotate
        </div>
        <div class="w-24 h-24 bg-green-500 rounded-lg scale-90 -rotate-12 shadow-lg flex items-center justify-center text-white text-xs">
          scale + rotate
        </div>
        <div class="w-24 h-24 bg-purple-500 rounded-lg skew-x-6 scale-105 shadow-lg flex items-center justify-center text-white text-xs">
          skew + scale
        </div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg -skew-x-3 rotate-3 translate-y-2 shadow-lg flex items-center justify-center text-white text-xs">
          组合变换
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 107 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要编写大量 CSS 来实现图片画廊悬停效果、毛玻璃导航栏、变换组合等效果，而 Tailwind 使用滤镜和变换工具类直接在 HTML 中完成。

❓ 常见问题

Q filter 和 backdrop-filter 有什么区别？
A filter 影响元素本身及其内容。backdrop-filter 影响元素背后的内容，需要元素有背景透明度才能看到效果。常用于毛玻璃效果。
Q transform 可以组合多个变换吗？
A 可以。Tailwind 支持组合多个变换类，如 scale-110 rotate-6 translate-x-4。注意变换顺序会影响最终效果。
Q 如何实现平滑的变换动画？
A 使用 transition-all duration-300 或 transition-transform duration-500 类。transition-all 过渡所有属性，transition-transform 只过渡变换属性。
Q backdrop-blur 为什么看不到效果？
A backdrop-blur 需要元素有背景透明度才能看到效果。确保使用 bg-white/20 或 bg-black/50 等半透明背景。同时需要浏览器支持 backdrop-filter 属性。

📖 小节

📝 作业

  1. ⭐ 创建一个图片画廊，使用 grayscale 和 hover:grayscale-0 实现悬停时从灰度变为彩色的效果

  2. ⭐⭐ 创建一个卡片组件，使用 hover:scale-105 hover:shadow-xl transition-all 实现悬停放大和阴影效果

  3. ⭐⭐⭐ 创建一个毛玻璃登录弹窗，使用 backdrop-blur-lg bg-white/20 实现背景模糊效果，配合 scale-95 hover:scale-100 实现悬停缩放动画

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏