backdrop-filter: blur()

例

基本的な例

backdrop-blur-sm や backdrop-blur-lg のようなユーティリティを使用して、要素の backdrop blur を制御します

backdrop-blur-none

backdrop-blur-sm

backdrop-blur-md

<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-blur-none ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-blur-sm ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-blur-md ..."></div>
</div>

カスタム値の使用

以下を使用します backdrop-blur-[<value>] 構文 を設定するにはbackdrop blur完全にカスタム値に基づいて

<div class="backdrop-blur-[2px] ...">
  <!-- ... -->
</div>

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

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

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

レスポンシブデザイン

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

<div class="backdrop-blur-none md:backdrop-blur-lg ...">
  <!-- ... -->
</div>

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

テーマのカスタマイズ

--blur-* テーマ変数を使用して、以下をカスタマイズしますbackdrop blur プロジェクト内のユーティリティ

@theme {
  --blur-2xs: 2px; 
}

これで backdrop-blur-2xs ユーティリティをマークアップで使用できます

<div class="backdrop-blur-2xs">
  <!-- ... -->
</div>

テーマのカスタマイズの詳細については、以下をご覧ください テーマのドキュメント.