濾鏡
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-(<custom-property>) | backdrop-filter: blur(var(<custom-property>)); |
backdrop-blur-[<value>] | backdrop-filter: blur(<value>); |
範例
基本範例
使用像是 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>在
主題文件.
