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 Farbsättigung des Eingabebildes. Sie wird als Wert für die Eigenschaften filter und backdrop-filter verwendet.

Hinweis: saturate() ist als Matrixoperation auf RGB-Farben definiert. Die Farbe wird dabei nicht tatsächlich in das HSL-Modell umgewandelt, da dies eine nichtlineare Operation wäre. 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

/* Completely unsaturated */
saturate(0)

/* No change */
saturate()
saturate(1)
saturate(100%)

/* 60% saturation */
saturate(.6)
saturate(60%)

/* Double saturation */
saturate(2)
saturate(200%)

Parameter

<number> oder <percentage> Optional: Gibt das Ausmaß der Umwandlung an. Ein Wert unter 100% verringert die Sättigung des Bildes, während ein Wert über 100% sie erhöht. Bei 0% ist das Bild vollständig entsättigt; bei 100% bleibt die Eingabe unverändert. Negative Werte sind nicht zulässig. Der Anfangswert für die Interpolation ist 1. Der Standardwert ist 1.

Rückgabewert

Ein <filter-function>-Wert.

Formale Syntax

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

Beispiele

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 beim saturate()-Farbverlauf Farbton und Helligkeit zu beiden Enden hin verändern.

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

SVG-Filter verwenden

Dieses Beispiel zeigt drei Bilder zum Vergleich: ein Bild mit angewendeter saturate()-Filterfunktion, ein Bild mit dem entsprechenden SVG-Filter und das Originalbild.

SVG

Das SVG-Filterelement <feColorMatrix> kann ebenfalls verwendet werden, um die Sättigung von Inhalten anzupassen. Wir setzen type auf saturate und values auf den gewünschten Sättigungswert. Anschließend können wir den SVG-Effekt über die ID des <filter> referenzieren:

html

<svg height="0" role="none">
  <filter id="saturate20" color-interpolation-filters="sRGB">
    <feColorMatrix type="saturate" values="0.2" />
  </filter>
</svg>

Die folgenden Deklarationen erzeugen denselben Effekt:

css

filter: saturate(0.2);
filter: saturate(20%);
filter: url("#saturate20"); /* with embedded SVG */
filter: url("fileName.svg#saturate20"); /* external SVG */

CSS

Wir verwenden CSS, um die Sättigung von Elementen abhängig von ihrer Klasse css-filter oder svg-filter anzupassen:

css

.css-filter {
  filter: saturate(0.2);
}

.svg-filter {
  filter: url("#saturate20");
}

th,
td {
  padding: 5px;
}

<table>
  <thead>
    <tr>
      <th><code>saturate()</code> filter</th>
      <th>SVG filter equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="css-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          class="svg-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Modul CSS-Filtereffekte
Zu den anderen <filter-function>-Funktionen, die als Werte für die 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()

SVG

CSS

Help improve MDN

CSS-Funktion `saturate()`