backdrop-filter: contrast()

例

基本的な例

backdrop-contrast-50 や backdrop-contrast-100 のようなユーティリティを使用して、要素の背景コントラストを制御します。

backdrop-contrast-50

backdrop-contrast-200

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

カスタム値の使用

次の backdrop-contrast-[<value>] 構文 を使用して、背景コントラストを完全にカスタム値に基づいて設定します。

<div class="backdrop-contrast-[.25] ...">
  <!-- ... -->
</div>

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

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

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

レスポンシブデザイン

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

<div class="backdrop-contrast-125 md:backdrop-contrast-150 ...">
  <!-- ... -->
</div>

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