filter: grayscale()

將灰階濾鏡應用於元素的實用工具。

類別樣式

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

grayscale (灰階)

filter: grayscale(100%);

grayscale-<number>

filter: grayscale(<number>%);

grayscale-(<custom-property>)

filter: grayscale(var(<custom-property>));

grayscale-[<value>]

filter: grayscale(<value>);

範例

使用像 grayscale 和 grayscale-75 這樣的實用工具來控制應用於元素的灰階效果的程度。

使用 grayscale (灰階)-[<value>] 語法來設定grayscale (灰階)基於完全自定義的值

<img class="grayscale-[0.5] ..." src="/img/mountains.jpg" />

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

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

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

前綴一個 filter: grayscale() 實用工具帶有一個斷點變體，如 md:，僅在中等螢幕尺寸及以上時應用該實用工具

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

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