filter

範例

基本範例

使用類似 blur-xs 和 grayscale 的工具將濾鏡應用於元素

blur-xs

grayscale

combined

<img class="blur-xs" src="/img/mountains.jpg" /><img class="grayscale" src="/img/mountains.jpg" /><img class="blur-xs grayscale" src="/img/mountains.jpg" />

您可以組合以下濾鏡工具：blur、brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、saturate 和 sepia。

移除濾鏡

使用 filter-none 工具移除應用於元素的所有濾鏡

<img class="blur-md brightness-150 invert md:filter-none" src="/img/mountains.jpg" />

使用自訂值

使用 filter-[<值>] 語法 設定filter基於完全自訂的值

<img class="filter-[url('filters.svg#filter-id')] ..." src="/img/mountains.jpg" />

對於 CSS 變數，您也可以使用 filter-(<自訂屬性>) 語法

<img class="filter-(--my-filter) ..." src="/img/mountains.jpg" />

這只是 filter-[var(<自訂屬性>)] 的簡寫，它會自動為您新增 var() 函式。

滑鼠懸停時應用

字首一個 filter 工具加上一個變體，例如 hover:* 僅在該狀態下應用該工具

<img class="blur-sm hover:filter-none ..." src="/img/mountains.jpg" />

在變體文件中瞭解更多關於使用變體的資訊。

響應式設計

字首一個 filter 工具 帶有斷點變體，例如 md:，僅在中等 螢幕尺寸及以上應用該工具

<img class="blur-sm md:filter-none ..." src="/img/mountains.jpg" />

在變體文件中瞭解更多關於使用變體的資訊。