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>] 語法 設定背景懷舊 (backdrop sepia)基於完全自定義的值

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

對於 CSS 變數，您也可以使用 backdrop-sepia-(<custom-property>) 語法

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

這只是 backdrop-sepia-[var(<custom-property>)] 的簡寫，它會自動為您新增 var() 函數。

響應式設計

前綴將 backdrop-filter: sepia() 實用工具 加上像 md: 這樣的斷點變體，以便僅在中等 螢幕尺寸及以上時套用該實用工具

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

在變體文件中了解有關使用變體的更多資訊。