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