backdrop-filter: brightness()

例

基本的な例

要素の背景の明るさを制御するには、backdrop-brightness-50 や backdrop-brightness-100 のようなユーティリティを使用します。

backdrop-brightness-50

backdrop-brightness-150

<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-brightness-50 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-brightness-150 ..."></div>
</div>

カスタム値の使用

以下の backdrop-brightness-[<value>] 構文 を使用して、背景の明るさを完全にカスタムの値に基づいて設定します。

<div class="backdrop-brightness-[1.75] ...">
  <!-- ... -->
</div>

CSS変数については、以下も使用できます。 backdrop-brightness-(<custom-property>) 構文

<div class="backdrop-brightness-(--my-backdrop-brightness) ...">
  <!-- ... -->
</div>

これは、以下の省略形です。 backdrop-brightness-[var(<custom-property>)] これは、自動的に var() 関数を追加します。

レスポンシブデザイン

プレフィックスa backdrop-filter: brightness() ユーティリティ を md: のようなブレークポイントバリアントでプレフィックスして、ユーティリティをmedium 画面サイズ以上でのみ適用します。

<div class="backdrop-brightness-110 md:backdrop-brightness-150 ...">
  <!-- ... -->
</div>

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