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 上查看此页面 • 报告此内容存在的问题