滤镜
backdrop-filter: blur()
用于将背景模糊滤镜应用于元素的工具类。
| 类 | 样式 |
|---|---|
backdrop-blur-xs | backdrop-filter: blur(var(--blur-xs)); /* 4px */ |
backdrop-blur-sm | backdrop-filter: blur(var(--blur-sm)); /* 8px */ |
backdrop-blur-md | backdrop-filter: blur(var(--blur-md)); /* 12px */ |
backdrop-blur-lg | backdrop-filter: blur(var(--blur-lg)); /* 16px */ |
backdrop-blur-xl | backdrop-filter: blur(var(--blur-xl)); /* 24px */ |
backdrop-blur-2xl | backdrop-filter: blur(var(--blur-2xl)); /* 40px */ |
backdrop-blur-3xl | backdrop-filter: blur(var(--blur-3xl)); /* 64px */ |
backdrop-blur-none | backdrop-filter: ; |
backdrop-blur-(<自定义属性>) | backdrop-filter: blur(var(<自定义属性>)); |
backdrop-blur-[<值>] | backdrop-filter: blur(<值>); |
示例
基本示例
使用诸如 backdrop-blur-sm 和 backdrop-blur-lg 之类的工具类来控制元素的背景模糊
backdrop-blur-none
backdrop-blur-sm
backdrop-blur-md
<div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-blur-none ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-blur-sm ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-blur-md ..."></div></div>使用自定义值
使用 backdrop-blur-[<值>] 语法 来设置背景模糊基于完全自定义的值
<div class="backdrop-blur-[2px] ..."> <!-- ... --></div>对于 CSS 变量，你也可以使用 backdrop-blur-(<自定义属性>) 语法
<div class="backdrop-blur-(--my-backdrop-blur) ..."> <!-- ... --></div>这只是 backdrop-blur-[var(<自定义属性>)] 的简写，它会自动为你添加 var() 函数。
响应式设计
前缀一个 backdrop-filter: blur() 工具类 带有像 md: 这样的断点变体，仅在中等 屏幕尺寸及以上应用该工具类
<div class="backdrop-blur-none md:backdrop-blur-lg ..."> <!-- ... --></div>在变体文档中了解更多关于使用变体的信息。
自定义你的主题
使用 --blur-* 主题变量来定制你的项目中的背景模糊 工具类
@theme { --blur-2xs: 2px; }现在 backdrop-blur-2xs 工具类可以在你的标记中使用
<div class="backdrop-blur-2xs"> <!-- ... --></div>在主题文档中了解更多关于自定义你的主题的信息 theme documentation.
