backdrop-filter

範例

基本範例

使用像 backdrop-blur-xs 和 backdrop-grayscale 這樣的實用類別來將濾鏡應用於元素的背景

backdrop-blur-xs

backdrop-grayscale

combined

<div class="bg-[url(/img/mountains.jpg)] ...">  <div class="backdrop-blur-xs ..."></div></div><div class="bg-[url(/img/mountains.jpg)] ...">  <div class="backdrop-grayscale ..."></div></div><div class="bg-[url(/img/mountains.jpg)] ...">  <div class="backdrop-blur-xs backdrop-grayscale ..."></div></div>

您可以組合以下背景濾鏡實用程式：blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate 和 sepia。

移除濾鏡

使用 backdrop-filter-none 實用類別來移除應用於元素的所有背景濾鏡

<div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none"></div>

使用自定義值

使用 backdrop-filter-[<value>] 語法 來設置背景濾鏡基於完全自定義的值

<div class="backdrop-filter-[url('filters.svg#filter-id')] ...">  <!-- ... --></div>

對於 CSS 變數，您也可以使用 backdrop-filter-(<custom-property>) 語法

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

這只是 backdrop-filter-[var(<custom-property>)] 的一個簡寫，它會自動為您添加 var() 函數。

在懸停時應用

前綴一個 帶有變體的 backdrop-filter 實用類別，例如 hover:* 僅在該狀態下應用該實用類別

<div class="backdrop-blur-sm hover:backdrop-filter-none ...">  <!-- ... --></div>

在變體文檔中了解有關使用變體的更多信息。

響應式設計

前綴一個 backdrop-filter 實用類別 帶有斷點變體，例如 md:，僅在中等 螢幕尺寸及以上應用該實用類別

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

在變體文檔中了解有關使用變體的更多信息。