filter: grayscale()

例

基本的な例

grayscale や grayscale-75 などのユーティリティを使用して、要素に適用されるグレースケール効果の量を制御します。

grayscale-0

grayscale-25

grayscale-50

grayscale

<img class="grayscale-0 ..." src="/img/mountains.jpg" />
<img class="grayscale-25 ..." src="/img/mountains.jpg" />
<img class="grayscale-50 ..." src="/img/mountains.jpg" />
<img class="grayscale ..." src="/img/mountains.jpg" />

カスタム値の使用

以下を使用してください 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() 関数を自動的に追加するものです。

レスポンシブデザイン

プレフィックスa filter: grayscale() ユーティリティ md: のようなブレークポイントバリアントを付けて、ユーティリティを適用するタイミングをmedium 画面サイズ以上にする

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

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。