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-[<value>] 语法 来设置背景模糊基于完全自定义的值

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

对于 CSS 变量，你也可以使用 backdrop-blur-(<custom-property>) 语法

<div class="backdrop-blur-(--my-backdrop-blur) ...">
  <!-- ... -->
</div>

这只是 backdrop-blur-[var(<custom-property>)] 的简写，它会自动为你添加 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>

在 主题文档.