Tailwind CSS - 滤镜

Tailwind CSS 中 CSS 滤镜的现代指南

Tailwind CSS 提供了一套全面的工具类，用于对元素应用 CSS 滤镜。这些工具类允许你在 HTML 中直接调整模糊（blur）、亮度（brightness）和对比度（contrast）等视觉属性。Tailwind 还支持 backdrop-filter 工具类，它仅对元素后面的区域应用滤镜。

滤镜工具类

滤镜工具类直接应用于元素，影响其整体外观。它们非常适合对图像进行样式设置或在卡片及其他元素上创建视觉效果。

类别	示例类	描述
模糊与亮度	blur-sm, blur-md brightness-50, brightness-125	应用高斯模糊或调整元素的亮度。
颜色校正	contrast-150 grayscale hue-rotate-90 invert saturate-200 sepia	调整对比度、饱和度等颜色属性，或应用灰度、复古色调等效果。
投影	drop-shadow-lg drop-shadow-2xl	对元素内容应用投影，与应用于盒子本身的 box-shadow 不同。非常适用于非矩形形状或文本。

示例 1：交互式图片画廊

此示例创建了一个简单的图片画廊。默认情况下，图片使用 saturate-50 进行去饱和处理并略微模糊。在悬停时，我们使用 hover:saturate-100 和 hover:blur-0 使图片完全清晰聚焦，从而创造出一种愉悦的交互效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filter Utilities</title>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-100 p-8">
    <h2 class="text-3xl font-bold text-center mb-8">交互式图片画廊</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
        <!-- 使用占位图服务 -->
        <img src="https://picsum.photos/id/1015/600/400" alt="Landscape with a lake" class="image-style"/>
        <img src="https://picsum.photos/id/1018/600/400" alt="Mountain range" class="image-style"/>
        <img src="https://picsum.photos/id/1025/600/400" alt="A cute puppy" class="image-style"/>
    </div>
    <style>
        .image-style {
            @apply rounded-lg shadow-lg object-cover w-full h-64
                   saturate-50 blur-sm
                   transition-all duration-300 ease-in-out
                   hover:saturate-100 hover:blur-0 hover:shadow-2xl;
        }
    </style>
</body>
</html>

背景滤镜工具类

背景滤镜用于创建流行的“磨砂玻璃”UI 效果。它们将滤镜应用于半透明元素后面的内容，而不是元素本身。最常用的工具类是 backdrop-blur。

示例 2：磨砂玻璃卡片叠加

在这里，我们将卡片放置在背景图像之上。卡片具有半透明背景（bg-white/30）。通过添加 backdrop-blur-lg，我们创建了一种时尚的效果，背景图像通过卡片模糊地显示出来，增强了文本的可读性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Backdrop Filter</title>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="h-screen">
    <div class="relative w-full h-full flex items-center justify-center p-4">
        <!-- 背景图片 -->
        <img src="https://picsum.photos/id/43/1200/800" alt="Colorful abstract background" class="absolute inset-0 w-full h-full object-cover"/>

        <!-- 磨砂玻璃卡片 -->
        <div class="w-full max-w-sm rounded-xl bg-white/30 p-8 shadow-2xl
                    backdrop-blur-lg ring-1 ring-black/5">
            <h3 class="text-2xl font-bold text-gray-900">磨砂卡片</h3>
            <p class="mt-2 text-gray-800">
                这张卡片使用 `backdrop-blur` 在背景图片上创建磨砂玻璃效果，使文本易于阅读。
            </p>
        </div>
    </div>
</body>
</html>

性能注意事项

滤镜，特别是 blur 和 backdrop-blur，对浏览器而言可能需要大量的计算资源来渲染。尽管它们能创造出精美的效果，但在大型或频繁变化的元素上过度使用可能会导致性能问题，尤其是在性能较低的设备上。请谨慎使用并测试应用程序的性能。