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⁩.

Diesaturate()CSS Funktion über-saturiert oder entsättigt das Eingabebild. Das Ergebnis ist eine<filter-function>.

Hinweis:saturate() wird als Matrixoperation auf die RGB-Farbwerte spezifiziert. Es konvertiert die Farbe nicht tatsächlich in das HSL-Modell, was eine nicht-lineare Operation ist. Daher kann es den Farbton oder die Helligkeit der ursprünglichen Farbe möglicherweise nicht bewahren.

Probieren Sie es aus

filter: saturate(1);

filter: saturate(4);

filter: saturate(50%);

filter: saturate(0);

<section>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" /></section>

Syntax

css

saturate(amount)

Parameter

amountOptional: Die Menge der Umwandlung, angegeben als ein<number> oder ein<percentage>. Ein Wert unter100% entsättigt das Bild, während ein Wert über100% es über-saturiert. Ein Wert von0% ist vollständig entsättigt, während ein Wert von100% die Eingabe unverändert lässt. Der Anfangswert für dieInterpolation ist1. Der Standardwert ist1.

Formale Syntax

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

Beispiele

Beispiele für korrekte Werte von saturate()

css

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

saturate() bewahrt den Farbton oder die Helligkeit nicht

Das untenstehende Diagramm vergleicht zwei Farbverläufe mithsl(0 50% 50%) als Mittelpunkt: Der erste wird mitsaturate() erzeugt, und der zweite verwendet tatsächliche HSL-Farbwerte. Beachten Sie, wie dersaturate() Verlauf Unterschiede in Farbton und Helligkeit zu den beiden Enden hin zeigt.

html

<div>  <p>Using <code>saturate()</code></p>  <div></div></div><div>  <p>Using <code>hsl()</code></p>  <div></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 derfilter undbackdrop-filter Eigenschaften verwendet werden können, umfassen:

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

Movatterモバイル変換

saturate()

Help improve MDN