backdrop-filter: blur()

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 backdrop-blur-sm 和 backdrop-blur-lg 等工具来控制元素的背景模糊：

¥Use utilities like backdrop-blur-sm and backdrop-blur-lg to control an element’s backdrop blur:

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>

使用自定义值(Using a custom value)

¥Using a custom value

使用 backdrop-blur-[<value>] 语法 根据完全自定义的值设置 backdrop blur：

<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() 函数。

响应式设计(Responsive design)

¥Responsive design

在 backdrop-filter: blur() 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

<div class="backdrop-blur-none md:backdrop-blur-lg ...">  <!-- ... --></div>

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

使用 --blur-* 主题变量来自定义项目中的 backdrop blur 工具：

@theme {  --blur-2xs: 2px; }

现在 backdrop-blur-2xs 工具可用于你的标记：

<div class="backdrop-blur-2xs">  <!-- ... --></div>

在此详细了解如何自定义主题： 主题文档。