Filters
backdrop-filter: blur()
用於對元素套用背景模糊濾鏡的通用類別。
| Class | Styles |
|---|---|
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-(<custom-property>) | backdrop-filter: blur(var(<custom-property>)); |
backdrop-blur-[<value>] | backdrop-filter: blur(<value>); |
範例（Examples）
基本範例（Basic example）
使用 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>使用自訂值（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）
在 backdrop-filter: blur() 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<div class="backdrop-blur-none md:backdrop-blur-lg ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。
自訂你的主題（Customizing your theme）
使用 --blur-* 主題變數來自訂專案中的 backdrop blur 通用類別：
@theme { --blur-2xs: 2px; }現在可以在標記中使用 backdrop-blur-2xs 通用類別：
<div class="backdrop-blur-2xs"> <!-- ... --></div>在主題文件中了解更多關於自訂主題的資訊。