Tailwind CSS 毛玻璃模糊效果

基本用法#

背景模糊是 Tailwind CSS 中的一种实用工具，允许您为元素的背景应用模糊效果。此功能在 Tailwind CSS 2.1 版本中引入，并提供了多种类来控制模糊效果的强度。

示例代码#

要应用背景模糊效果，您可以使用 backdrop-blur-* 实用类。以下是一些示例：

<div class="backdrop-blur-sm bg-white/30"></div>
<div class="backdrop-blur-md bg-white/30"></div>
<div class="backdrop-blur-xl bg-white/30"></div>

可用的类及其对应的模糊效果如下：

• backdrop-blur-none：无模糊效果。
• backdrop-blur-sm：小型模糊效果（4px）。
• backdrop-blur：标准模糊效果（8px）。
• backdrop-blur-md：中型模糊效果（12px）。
• backdrop-blur-lg：大型模糊效果（16px）。
• backdrop-blur-xl：超大型模糊效果（24px）。
• backdrop-blur-2xl：双倍超大型模糊效果（40px）。
• backdrop-blur-3xl：三倍超大型模糊效果（64px）。

条件应用#

您可以使用变体修饰符有条件地应用背景模糊效果。例如，要仅在鼠标悬停时应用模糊效果，可以使用 hover: 前缀：

<div class="backdrop-blur-sm hover:backdrop-blur-lg"></div>

同样，您可以针对媒体查询（如响应式断点、暗黑模式等）应用模糊效果。例如，要仅在中等及以上屏幕尺寸应用模糊效果，可以使用 md: 前缀：

<div class="backdrop-blur-sm md:backdrop-blur-lg"></div>

自定义背景模糊#

您可以通过编辑 tailwind.config.js 文件中的 theme.backdropBlur 或 theme.extend.backdropBlur 部分来定制默认的背景模糊值：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backdropBlur: {
        xs: '2px',
      },
    },
  },
};

如果您需要使用一次性的背景模糊值，且不适合包含在主题中，可以使用方括号动态生成任意值的属性：

<div class="backdrop-blur-[2px]"></div>

移除背景滤镜#

要从元素中移除所有背景滤镜，可以使用 backdrop-filter-none 实用类：

<div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none"></div>

这在需要有条件地移除背景滤镜时非常有用，例如在鼠标悬停或特定断点时。

通过使用这些实用类，您可以轻松控制 Tailwind CSS 项目中的背景模糊效果，使您的用户界面更具视觉吸引力和交互性。