backdrop-filter: saturate()

例

基本的な例

要素の背景の彩度を制御するには、backdrop-saturate-50 や backdrop-saturate-100 などのユーティリティを使用してください。

backdrop-saturate-50

backdrop-saturate-125

backdrop-saturate-200

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

カスタム値の使用

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

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

CSS変数の場合は、以下も使用できます。 backdrop-saturate-(<custom-property>) 構文

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

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

レスポンシブデザイン

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

<div class="backdrop-saturate-50 md:backdrop-saturate-150 ...">
  <!-- ... -->
</div>

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