CSS-Funktion `saturate()`

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2016 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Funktion saturate() erhöht oder verringert die Sättigung des Eingabebilds. Ihr Ergebnis ist eine <filter-function>.

Hinweis: saturate() ist als Matrixoperation auf RGB-Farben definiert. Die Farbe wird dabei nicht tatsächlich in das HSL-Modell umgewandelt; eine solche Umwandlung ist eine nichtlineare Operation. Daher bleiben Farbton und Helligkeit der ursprünglichen Farbe möglicherweise nicht erhalten.

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: Das Ausmaß der Umwandlung, angegeben als <number> oder <percentage>. Ein Wert unter 100% verringert die Sättigung des Bilds, während ein Wert über 100% sie erhöht. Bei 0% ist das Bild vollständig entsättigt; bei 100% bleibt das Eingabebild unverändert. Negative Werte sind nicht zulässig. Der Anfangswert für die Interpolation ist 1. Der Standardwert ist 1.

Formale Syntax

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

Beispiele

Beispiele für gültige Werte von saturate()

css

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

saturate() erhält Farbton und Helligkeit nicht

Das folgende Diagramm vergleicht zwei Farbverläufe mit hsl(0 50% 50%) als Mittelpunkt: Der erste wird mit saturate() erzeugt, der zweite verwendet tatsächliche HSL-Farbwerte. Beachten Sie, wie sich Farbton und Helligkeit des mit saturate() erzeugten Verlaufs zu beiden Enden hin unterscheiden.

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

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

Browser-Kompatibilität

Siehe auch

Zu den weiteren <filter-function>-Funktionen, die in Werten der Eigenschaften filter und backdrop-filter verwendet werden können, gehören:

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS-Funktion saturate()

Help improve MDN

CSS-Funktion `saturate()`