filter: invert()

例

基本的な例

invert や invert-20 のようなユーティリティを使用して、要素の色反転を制御します

invert-0

invert-20

invert

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

カスタム値の使用

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

レスポンシブデザイン

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

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

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