backdrop-filter: sepia()

例

基本的な例

要素の背景に適用されるセピア効果を制御するには、backdrop-sepia や backdrop-sepia-50 のようなユーティリティを使用します

backdrop-sepia-0

backdrop-sepia-50

backdrop-sepia

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

カスタム値の使用

次の backdrop-sepia-[<value>] 構文 を使用して、背景セピアを完全にカスタム値に基づいて設定します

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

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

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

これは backdrop-sepia-[var(<custom-property>)] を自動的に追加する shorthand です。

レスポンシブデザイン

プレフィックスa backdrop-filter: sepia() ユーティリティ に md: のような breakpoint variant を prefix して、ユーティリティを適用する対象をmedium screen sizes and above に限定します

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

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