saturate()

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

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

试一试

语法

css

saturate(amount)

参数

amount: 转换量，指定为 <number> 或 <percentage>。小于 100% 的值会使图像去饱和，而大于 100% 的值会使图像超级饱和。0% 的值表示完全去饱和，而 100% 的值表示保持输入不变。用于插值的初始值为 1。

示例

saturate() 的正确值示例

css

saturate(0)     /* Completely unsaturated */
saturate(.4)    /* 40% saturated */
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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

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