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 übersteigert oder entsättigt das Eingabebild. Ihr 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, das eine nicht-lineare Operation ist. Daher kann es den Farbton oder die Helligkeit der ursprünglichen Farbe möglicherweise nicht beibehalten.
Probieren Sie es aus
Syntax
saturate(amount)
Parameter
amount
-
Die Menge der Umwandlung, angegeben als
<number>
oder<percentage>
. Ein Wert unter100%
entsättigt das Bild, während ein Wert über100%
es übersteigert. Ein Wert von0%
ist vollständig entsättigt, während ein Wert von100%
das Eingabebild unverändert lässt. Der Anfangswert für Interpolation ist1
.
Formale Syntax
Beispiele
Beispiele für korrekte Werte bei saturate()
saturate(0) /* Completely unsaturated */
saturate(.4) /* 40% saturated */
saturate(100%) /* No effect */
saturate(200%) /* Double saturation */
saturate() bewahrt Farbton oder Helligkeit nicht
Das untenstehende 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()
-Verlauf Unterschiede in Farbton und Helligkeit zu den beiden Enden zeigt.
<div>
<p>Using <code>saturate()</code></p>
<div id="saturate"></div>
</div>
<div>
<p>Using <code>hsl()</code></p>
<div id="hsl"></div>
</div>
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
saturate() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
Die anderen <filter-function>
Funktionen, die in Werten der filter
und backdrop-filter
Eigenschaften verwendet werden können, umfassen: