saturate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

We'd love to hear more about your role and the company you work for

Please help us by answering a few questions.

Die saturate() CSS Funktion super-saturiert oder entsättigt das Eingabebild. Ihr Ergebnis ist eine <filter-function>.

Note: saturate() ist als Matrixoperation auf der RGB-Farbe spezifiziert. Sie konvertiert die Farbe nicht tatsächlich in das HSL-Modell, was eine nicht-lineare Operation ist. Daher kann sie die Farbton- oder Helligkeitswerte der Originalfarbe nicht beibehalten.

Probieren Sie es aus

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>

Syntax

css

saturate(amount)

Parameter

amount Optional: Die Menge der Umwandlung, angegeben als <number> oder <percentage>. Ein Wert unter 100% entsättigt das Bild, während ein Wert über 100% es super-saturiert. Ein Wert von 0% ist komplett entsättigt, während ein Wert von 100% die Eingabe unverändert lässt. Der initiale Wert für Interpolierung ist 1. Der Standardwert ist 1.

Formale Syntax

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

Beispiele

Beispiele für korrekte Werte für saturate()

css

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

saturate() bewahrt Farbton oder Helligkeit nicht

Das folgende Diagramm vergleicht zwei Farbspektren mit hsl(0 50% 50%) als Mittelpunkt: das erste Spektrum wird unter Verwendung von saturate() erstellt und das zweite benutzt tatsächliche HSL-Farbwerte. Beachten Sie, wie das saturate()-Spektrum Unterschiede im Farbton und in der Helligkeit zu den beiden Enden hin zeigt.

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);
}

Spezifikationen

Specification
Filter Effects Module Level 1 # funcdef-filter-saturate

Browser-Kompatibilität

Siehe auch

Die anderen <filter-function> Funktionen, die in den Werten der filter und backdrop-filter Eigenschaften verwendet werden können, umfassen: