Skip to content
W3S101

Tailwind CSS - 模糊

Tailwind CSS：应用模糊效果

Section titled “Tailwind CSS：应用模糊效果”

Tailwind CSS 中的 blur 工具类为元素应用 blur（模糊）滤镜，创建“磨砂玻璃”效果。这通常用于 UI 元素，例如模态框背景、图像叠加层或位于其他内容顶部的标题。

了解模糊工具类

Section titled “了解模糊工具类”

Tailwind 提供了一系列 blur-{amount} 类，它们对应于 CSS filter: blur(value); 属性。你可以将这些类应用于任何元素以控制其模糊度。

类名CSS 属性
blur-nonefilter: blur(0);
blur-smfilter: blur(4px);
blurfilter: blur(8px); (默认)
blur-mdfilter: blur(12px);
blur-lgfilter: blur(16px);
blur-xlfilter: blur(24px);
blur-2xlfilter: blur(40px);
blur-3xlfilter: blur(64px);

实际应用：带模糊叠加层的图片卡片

Section titled “实际应用：带模糊叠加层的图片卡片”

blur 工具类的一个常见用例是在图像上创建文本叠加层，其中文本后面的背景被模糊化以提高可读性。让我们构建一个响应式卡片组件来演示这一点。

项目设置（现代工作流）

Section titled “项目设置（现代工作流）”

虽然你可以使用 Tailwind Play CDN 进行快速演示，但实际项目应使用 npm 或 yarn 进行现代构建流程。这允许全面的自定义、性能优化（如清除未使用的 CSS）以及更好的开发者体验。

Terminal window
# 1. 安装 Tailwind CSS 及其对等依赖
npm install -D tailwindcss postcss autoprefixer


# 2. 初始化 Tailwind
npx tailwindcss init -p

这会创建 tailwind.config.js 和 postcss.config.js 文件。

配置和 CSS

Section titled “配置和 CSS”

首先，在 tailwind.config.js 中配置你的模板路径，告诉 Tailwind 在哪里扫描类。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './*.{html,js}', // 扫描根目录中的所有 HTML 和 JS 文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

接下来，将 Tailwind 指令添加到你的主 CSS 文件中。

input.css
@tailwind base;
@tailwind components;
@tailwind utilities;

最后，运行 Tailwind CLI 来构建你的 CSS。

Terminal window
# 此命令会监听更改并自动重新构建你的 CSS
npx tailwindcss -i ./input.css -o ./output.css --watch

示例：构建卡片

Section titled “示例：构建卡片”

在 HTML 中链接生成的 output.css 并构建组件。我们将使用一个带背景图片的 div，而一个内部 div 将作为模糊叠加层。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS 模糊示例</title>
    <link href="./output.css" rel="stylesheet">
    <style>
        /* （仅用于演示目的，使用内联样式设置背景图像） */
        .card-bg {
            background-image: url('https://source.unsplash.com/random/800x600');
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">


  <div class="max-w-md w-full mx-auto">
    <h1 class="text-3xl font-bold text-center mb-6 text-gray-800">现代图片卡片</h1>


    <!-- 卡片容器 -->
    <div class="relative rounded-lg overflow-hidden shadow-2xl h-80 bg-cover bg-center card-bg">


        <!-- 带内容的模糊叠加层 -->
        <div class="absolute inset-x-0 bottom-0 p-6">
            <!-- （`::before` 伪元素创建模糊效果） -->
            <div class="relative p-6 bg-white bg-opacity-20 rounded-lg backdrop-blur-md shadow-lg">
                <h2 class="text-2xl font-bold text-white">项目 Alpha</h2>
                <p class="mt-2 text-gray-200">使用模糊背景增强可读性和深度，探索现代 UI 设计。</p>
            </div>
        </div>
    </div>


    <h2 class="text-2xl font-bold text-center mt-12 mb-6 text-gray-800">模糊变化</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
        <!-- 示例变体 -->
        <div class="relative h-32 bg-cover bg-center card-bg rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-md">
            <div class="absolute inset-0 bg-black bg-opacity-20 backdrop-blur-sm"></div>
            <span class="relative">blur-sm</span>
        </div>
        <div class="relative h-32 bg-cover bg-center card-bg rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-md">
            <div class="absolute inset-0 bg-black bg-opacity-20 backdrop-blur-lg"></div>
            <span class="relative">blur-lg</span>
        </div>
        <div class="relative h-32 bg-cover bg-center card-bg rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-md">
            <!-- 在悬停时应用模糊以实现交互效果 -->
            <div class="absolute inset-0 bg-black bg-opacity-20 backdrop-blur-none hover:backdrop-blur-xl transition-all duration-300"></div>
            <span class="relative">悬停我 (blur-xl)</span>
        </div>
    </div>


  </div>


</body>
</html>

最佳实践和高级用法

Section titled “最佳实践和高级用法”
  • 性能：应用模糊滤镜可能需要大量计算。请谨慎使用，尤其是在大型元素或动画上。在低端设备上测试性能。
  • 可访问性：确保放置在模糊背景上的文本具有足够的对比度。bg-opacity-* 类在此处有助于加深或提亮模糊层。
  • 背景模糊（Backdrop Blur）：backdrop-blur-* 工具类通常才是你真正想要的。它模糊的是元素 背后 的内容，而不是元素本身。我们的示例使用 backdrop-blur，因为它对于 UI 叠加层来说是更常见和实用的选择。
  • 响应式模糊：将模糊工具类与响应式前缀结合使用，以在不同屏幕尺寸上改变模糊量（例如 blur-md md:blur-lg）。
  • 自定义：如果默认的模糊值不够用，你可以在 tailwind.config.js 文件的 theme.extend.blur 部分添加自己的值。