saturate()

Baseline 已广泛支持

此特性已非常成熟，可在多种设备和浏览器版本上使用。自 ⁨2016 年 9 月⁩以来，它已在各大浏览器中可用。

saturate() CSS 函数对输入图像进行超饱和或去饱和处理。其结果是 <filter-function>。

注意： saturate() 被指定为对 RGB 颜色进行矩阵运算。它实际上不会将颜色转换为 HSL 模型，因为 HSL 是一种非线性操作。因此，它可能无法保留原始颜色的色相或亮度。

试一试

filter: saturate(1);

filter: saturate(4);

filter: saturate(50%);

filter: saturate(0);

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

语法

css

saturate(amount)

参数

amount 可选: 转换量，以 <number> 或 <percentage> 的形式指定。低于 100% 的值会使图像去饱和，而高于 100% 的值会使其超饱和。0% 的值表示完全不饱和，而 100% 的值保持输入不变。插值的初始值为 1。默认值为 1。

正式语法

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

示例

saturate() 的正确值示例

css

saturate(0)     /* Completely unsaturated */
saturate(.4)    /* 40% saturated */
saturate()      /* No effect */
saturate(100%)  /* No effect */
saturate(200%)  /* Double saturation */

saturate() 不保留色相或亮度

下图比较了两个以 hsl(0 50% 50%) 为中点的颜色渐变：第一个使用 saturate() 生成，第二个使用实际的 HSL 颜色值。请注意，saturate() 渐变在两端显示出色相和亮度差异。

html

<div>
  <p>Using <code>saturate()</code></p>
  <div id="saturate"></div>
</div>
<div>
  <p>Using <code>hsl()</code></p>
  <div id="hsl"></div>
</div>

#saturate,
#hsl {
  display: flex;
  margin: 1em 0;
}

#saturate div,
#hsl div {
  width: 2px;
  height: 100px;
}

const saturate = document.getElementById("saturate");
const hsl = document.getElementById("hsl");

for (let i = 0; i <= 200; i++) {
  const div1 = document.createElement("div");
  div1.style.backgroundColor = `hsl(0 ${i / 2}% 50%)`;
  hsl.appendChild(div1);

  const div2 = document.createElement("div");
  div2.style.backgroundColor = "hsl(0 50% 50%)";
  div2.style.filter = `saturate(${i}%)`;
  saturate.appendChild(div2);
}

规范

规范
滤镜效果模块第 1 级 # funcdef-filter-saturate

浏览器兼容性

另见

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

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 10 月 10 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题