saturate()

Die saturate() CSS Funktion über-saturiert oder desaturiert das Eingangsbild. Das Ergebnis ist eine <filter-function>.

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

Probieren Sie es aus

Syntax

css
saturate(amount)

Parameter

amount

Die Menge der Umwandlung, angegeben als <number> oder <percentage>. Ein Wert unter 100% desaturiert das Bild, während ein Wert über 100% es über-saturiert. Ein Wert von 0% ist komplett entsättigt, während ein Wert von 100% das Eingangsbild unverändert lässt. Der Anfangswert für die Interpolation ist 1.

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 den Farbton oder die Helligkeit nicht

Das folgende Diagramm vergleicht zwei Farbverläufe mit hsl(0 50% 50%) als Mittelpunkt: Der erste wird mit saturate() erzeugt, und der zweite verwendet tatsächliche HSL-Farbwerte. Beachten Sie, wie der saturate()-Farbverlauf zu den beiden Enden Unterschiede im Farbton und in der Helligkeit 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>
js
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, umfassen: