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
saturate(amount)
Parameter
amount
-
Die Menge der Umwandlung, angegeben als
<number>
oder<percentage>
. Ein Wert unter100%
desaturiert das Bild, während ein Wert über100%
es über-saturiert. Ein Wert von0%
ist komplett entsättigt, während ein Wert von100%
das Eingangsbild unverändert lässt. Der Anfangswert für die Interpolation ist1
.
Beispiele
Beispiele für korrekte Werte für saturate()
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.
<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
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: