backdrop-filter: opacity()

例

基本的な例

backdrop-opacity-50 や backdrop-opacity-75 のようなユーティリティを使用して、要素に適用されるすべての背景フィルターの不透明度を制御します。

backdrop-opacity-10

backdrop-opacity-60

backdrop-opacity-95

<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-invert backdrop-opacity-10 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-invert backdrop-opacity-60 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-invert backdrop-opacity-95 ..."></div>
</div>

カスタム値の使用

次の backdrop-opacity-[<value>] 構文 を使用して、背景フィルターの不透明度を完全にカスタムの値に基づいて設定します。

<div class="backdrop-opacity-[.15] ...">
  <!-- ... -->
</div>

CSS変数には、次の backdrop-opacity-(<custom-property>) 構文

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

も使用できます。これは backdrop-opacity-[var(<custom-property>)] のショートハンドであり、var() 関数を自動的に追加します。

レスポンシブデザイン

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

<div class="backdrop-opacity-100 md:backdrop-opacity-60 ...">
  <!-- ... -->
</div>

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