フィルター
filter: sepia()
要素にセピアフィルターを適用するためのユーティリティ。
| クラス | スタイル |
|---|---|
セピア | filter: sepia(100%); |
sepia-<number> | filter: sepia(<number>%); |
sepia-(<custom-property>) | filter: sepia(var(<custom-property>)); |
sepia-[<value>] | filter: sepia(<value>); |
例
基本例
sepia や sepia-50 のようなユーティリティを使用して、要素に適用されるセピア効果を制御します。
sepia-0
sepia-50
セピア
<img class="sepia-0" src="/img/mountains.jpg" /><img class="sepia-50" src="/img/mountains.jpg" /><img class="sepia" src="/img/mountains.jpg" />カスタム値の使用
以下を使用してください セピア-[<value>] 構文 を設定するにはセピア量完全にカスタム値に基づいて
<img class="sepia-[.25] ..." src="/img/mountains.jpg" />CSS変数の場合、以下も使用できます セピア-(<custom-property>) 構文
<img class="sepia-(--my-sepia) ..." src="/img/mountains.jpg" />これは単なるショートハンドです セピア-[var(<custom-property>)] これは自動的に var() 関数を追加します。
レスポンシブデザイン
プレフィックスa filter: sepia() ユーティリティ md: のようなブレークポイントバリアントでプレフィックスを付けると、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみです
<img class="sepia md:sepia-0 ..." src="/img/mountains.jpg" />バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。