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.

Die saturate() CSS Funktion erhöht die Sättigung oder entsättigt das Eingabebild. Das Ergebnis ist eine <filter-function>.

Note: saturate() wird als Matrixoperation auf die RGB-Farbe spezifiziert. Es konvertiert die Farbe nicht tatsächlich in das HSL-Modell, welches eine nicht-lineare Operation ist. Daher kann es sein, dass der Farbton oder die Helligkeit der Originalfarbe nicht erhalten bleibt.

Syntax

css

saturate(amount)

Parameter

amount: Die Menge der Umwandlung, angegeben als <number> oder <percentage>. Ein Wert unter 100% entsättigt das Bild, während ein Wert über 100% die Sättigung erhöht. Ein Wert von 0% ist vollständig entsättigt, während ein Wert von 100% die Eingabe unverändert lässt. Der anfängliche Wert für Interpolation 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(100%)  /* No effect */
saturate(200%)  /* Double saturation */

saturate() erhält Farbton oder Helligkeit nicht

Das untenstehende Diagramm vergleicht zwei Farbverläufe mit hsl(0 50% 50%) als Mittelwert: Der erste wird mit saturate() erzeugt, und der zweite verwendet tatsächliche HSL-Farbwerte. Beachten Sie, wie der saturate()-Verlauf 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

BCD tables only load in the browser

Siehe auch

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