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 上檢視此頁面 • 報告此內容的問題