濾鏡
backdrop-filter: opacity()
用於將背景不透明度濾鏡應用於元素的工具。
| 類別 | 樣式 |
|---|---|
backdrop-opacity-<number> | backdrop-filter: opacity(<number>%); |
backdrop-opacity-(<custom-property>) | backdrop-filter: opacity(var(<custom-property>)); |
backdrop-opacity-[<value>] | backdrop-filter: opacity(<value>); |
範例
基本範例
使用 backdrop-opacity-50 和 backdrop-opacity-75 等工具來控制應用於元素的所有背景濾鏡的不透明度
backdrop-opacity-10
backdrop-opacity-60
backdrop-opacity-95
<div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert backdrop-opacity-10 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert backdrop-opacity-60 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert backdrop-opacity-95 ..."></div></div>使用自訂值
使用 backdrop-opacity-[<value>] 語法 來設定背景濾鏡不透明度基於完全自訂的值
<div class="backdrop-opacity-[.15] ..."> <!-- ... --></div>對於 CSS 變數，您也可以使用 backdrop-opacity-(<custom-property>) 語法
<div class="backdrop-opacity-(--my-backdrop-filter-opacity) ..."> <!-- ... --></div>這只是 backdrop-opacity-[var(<custom-property>)] 的簡寫，它會自動為您新增 var() 函式。
響應式設計
前綴一個 backdrop-filter: opacity() 工具 帶有一個像 md: 這樣的斷點變體，僅在中等 螢幕尺寸及以上應用該工具
<div class="backdrop-opacity-100 md:backdrop-opacity-60 ..."> <!-- ... --></div>請在變體文件中瞭解更多關於使用變體的信息。
