sepia()

Baseline 已廣泛支援

此特性已非常成熟，可在多種裝置和瀏覽器版本上使用。自 ⁨2016 年 9 月⁩以來，它已在各大瀏覽器中可用。

sepia() CSS 函式將輸入影像轉換為深褐色，使其呈現更暖和、更偏黃/棕的色調。其結果是 <filter-function>。

試一試

filter: sepia(0);

filter: sepia(0.2);

filter: sepia(60%);

filter: sepia(1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

語法

css

sepia(amount)

引數

amount 可選: 轉換的程度，指定為 <number> 或 <percentage>。值為 100% 表示完全深褐色，而 0% 則保持輸入不變。0% 和 100% 之間的值是對效果的線性乘數。插值 interpolation 的初始值為 0。預設值為 1。

正式語法

<sepia()> = 
  sepia( [ <number> | <percentage> ]? )

示例

sepia() 正確值的示例

css

sepia(0)     /* No effect */
sepia(.65)   /* 65% sepia */

sepia()      /* Completely sepia */
sepia(100%)

規範

規範
濾鏡效果模組第 1 級 # funcdef-filter-sepia

瀏覽器相容性

另見

在 filter 和 backdrop-filter 屬性值中可用的其他 <filter-function> 函式包括：

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者在 2025 年 10 月 10 日修改。

在 GitHub 上檢視此頁面 • 報告此內容存在的問題