filter: sepia()

範例

基本範例

使用像sepia 和 sepia-50 這樣的工具程式來控制應用於元素的棕褐色效果

sepia-0

sepia-50

sepia

<img class="sepia-0" src="/img/mountains.jpg" /><img class="sepia-50" src="/img/mountains.jpg" /><img class="sepia" src="/img/mountains.jpg" />

使用自訂值

使用 sepia-[<value>] 語法 來設定棕褐色程度基於完全自訂的值

<img class="sepia-[.25] ..." src="/img/mountains.jpg" />

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

<img class="sepia-(--my-sepia) ..." src="/img/mountains.jpg" />

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

響應式設計

前綴一個 filter: sepia() 工具程式 與斷點變體（如 md:）一起使用，以僅在以下情況下應用該工具程式：中等 螢幕尺寸及以上

<img class="sepia md:sepia-0 ..." src="/img/mountains.jpg" />

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