backdrop-filter: grayscale()

例

基本的な例

backdrop-grayscale-50 や backdrop-grayscale などのユーティリティを使用して、要素の背景に適用されるグレースケール効果を制御します。

backdrop-grayscale-0

backdrop-grayscale-50

backdrop-grayscale

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

カスタム値の使用

次の backdrop-grayscale-[<value>] 構文 を使用して背景グレースケールを完全にカスタムな値に基づいて設定するには

<div class="backdrop-grayscale-[0.5] ...">
  <!-- ... -->
</div>

CSS変数の場合は、 backdrop-grayscale-(<custom-property>) 構文

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

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

レスポンシブデザイン

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

<div class="backdrop-grayscale md:backdrop-grayscale-0 ...">
  <!-- ... -->
</div>

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