filter: invert()

用於將反相濾鏡應用於元素的工具類別。

類別樣式

類別	樣式
`invert`	`filter: invert(100%);`
`invert-<number>`	`filter: invert(<number>%);`
`invert-(<custom-property>)`	`filter: invert(var(<custom-property>))`
`invert-[<value>]`	`filter: invert(<value>);`

invert

filter: invert(100%);

invert-<number>

filter: invert(<number>%);

invert-(<custom-property>)

filter: invert(var(<custom-property>))

invert-[<value>]

filter: invert(<value>);

範例

使用像 invert 和 invert-20 這樣的工具類別來控制元素顏色反轉

使用 invert-[<value>] 語法來設定顏色反轉基於完全自定義的值

<img class="invert-[.25] ..." src="/img/mountains.jpg" />

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

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

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

前綴為 filter: invert() 工具類別加上一個斷點變體，例如 md:，以僅在中medium 螢幕尺寸及以上應用該工具類別

<img class="invert md:invert-0 ..." src="/img/mountains.jpg" />

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