backdrop-filter

例

基本的な例

要素の backdrop にフィルターを適用するには、backdrop-blur-xs や backdrop-grayscale などのユーティリティを使用します

backdrop-blur-xs

backdrop-grayscale

組み合わせ

<div class="bg-[url(/img/mountains.jpg)] ...">
  <div class="backdrop-blur-xs ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)] ...">
  <div class="backdrop-grayscale ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)] ...">
  <div class="backdrop-blur-xs backdrop-grayscale ..."></div>
</div>

次の backdrop フィルターユーティリティを組み合わせることができます: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia.

フィルターの削除

backdrop-filter-none ユーティリティを使用して、要素に適用されたすべての backdrop フィルターを削除します

<div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none"></div>

カスタム値の使用

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

<div class="backdrop-filter-[url('filters.svg#filter-id')] ...">
  <!-- ... -->
</div>

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

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

これは単なる backdrop-filter-[var(<custom-property>)] のショートハンドで、var() 関数を自動的に追加します。

ホバー時に適用

プレフィックスa backdrop-filter ユーティリティと、次のようなバリアント hover:* を使用して、その状態でのみユーティリティを適用します

<div class="backdrop-blur-sm hover:backdrop-filter-none ...">
  <!-- ... -->
</div>

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

レスポンシブデザイン

プレフィックスa backdrop-filter ユーティリティ md: のようなブレークポイントバリアントとともに使用して、ユーティリティを適用するのはミディアム スクリーンサイズ以上

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

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