hue-rotate()
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 hue-rotate()
CSS Funktion dreht den Farbton eines Elements und dessen Inhalts. Ihr Ergebnis ist eine <filter-function>
.
Note:
hue-rotate()
wird als Matrixoperation auf der RGB-Farbe spezifiziert. Es konvertiert die Farbe nicht wirklich in das HSL-Modell, welches eine nicht-lineare Operation darstellt. Daher kann es sein, dass es die Sättigung oder Helligkeit der ursprünglichen Farbe nicht beibehält, insbesondere bei gesättigten Farben.
Probieren Sie es aus
Syntax
Die Funktion hue-rotate()
wendet eine Farbtonrotation auf die Elemente an, auf die sie angewendet wird.
hue-rotate(angle)
Werte
angle
-
Die relative Veränderung des Farbtons der Eingabeprobe, angegeben als
<angle>
. Ein Wert von0deg
lässt die Eingabe unverändert. Eine positive Farbtonrotation erhöht den Farbtonwert, während eine negative Rotation den Farbtonwert verringert. Der Anfangswert für Interpolation ist0
. Es gibt keinen Mindest- oder Höchstwert. Die Wirkung von Werten über360deg
entsprichtN
modulo 360 beihue-rotate(Ndeg)
.
Der <angle>
CSS-Datentyp steht für einen Winkelwert, der in Grad, Gon, Radianten oder Umdrehungen ausgedrückt wird. Die folgenden Werte sind äquivalent:
hue-rotate(-180deg)
hue-rotate(540deg)
hue-rotate(200grad)
hue-rotate(3.14159rad)
hue-rotate(0.5turn)
Formale Syntax
Beispiele
Mit der Eigenschaft backdrop-filter
Dieses Beispiel wendet einen hue-rotate()
Filter über die CSS-Eigenschaft backdrop-filter
auf den Absatz an, um die Farbe des Bereichs hinter dem <p>
zu ändern.
.container {
background: url(image.jpg) no-repeat left / contain #011296;
}
p {
backdrop-filter: hue-rotate(240deg);
text-shadow: 2px 2px #011296;
}
Mit der Eigenschaft filter
Dieses Beispiel wendet einen hue-rotate()
Filter über die CSS-Eigenschaft filter
an, wobei die Farbverschiebung auf das gesamte Element einschließlich Inhalt, Rahmen und Hintergrundbild angewendet wird.
p {
filter: hue-rotate(-60deg);
text-shadow: 2px 2px blue;
background-color: magenta;
color: goldenrod;
border: 1em solid rebeccapurple;
box-shadow:
inset -5px -5px red,
5px 5px yellow;
}
Mit url() und dem SVG-Farbtonrotationsfilter
Das SVG <filter>
-Element wird verwendet, um benutzerdefinierte Filtereffekte zu definieren, die dann über id
referenziert werden können. Der <filter>
-<feColorMatrix>
Primitive hueRotate
-Typ bietet den gleichen Effekt. Angenommen, Sie haben Folgendes:
<filter id="filterID">
<feColorMatrix type="hueRotate" values="90" />
</filter>
Diese Werte erzeugen die gleichen Ergebnisse:
filter: hue-rotate(90deg); /* 90deg rotation */
filter: url(#filterID); /* with embedded SVG */
filter: url(folder/fileName.svg#filterID); /* external svg filter definition */
Dieses Beispiel zeigt drei Bilder: das Bild mit einer hue-rotate()
Filterfunktion angewendet, das Bild mit einem äquivalenten url()
Filter angewendet und die Originalbilder zum Vergleich:
hue-rotate() erhält nicht Sättigung oder Helligkeit
Das untenstehende Diagramm vergleicht zwei Farbverläufe, die mit Rot beginnen: Der erste wird mit hue-rotate()
generiert, und der zweite verwendet tatsächliche HSL-Farbwerte. Beachten Sie, wie der hue-rotate()
Verlauf deutliche Unterschiede in Sättigung und Helligkeit in der Mitte zeigt.
<div>
<p>Using <code>hue-rotate()</code></p>
<div id="hue-rotate"></div>
</div>
<div>
<p>Using <code>hsl()</code></p>
<div id="hsl"></div>
</div>
const hueRotate = document.getElementById("hue-rotate");
const hsl = document.getElementById("hsl");
for (let i = 0; i < 360; i++) {
const div1 = document.createElement("div");
div1.style.backgroundColor = `hsl(${i}, 100%, 50%)`;
hsl.appendChild(div1);
const div2 = document.createElement("div");
div2.style.backgroundColor = "red";
div2.style.filter = `hue-rotate(${i}deg)`;
hueRotate.appendChild(div2);
}
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # funcdef-filter-hue-rotate |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
hue-rotate() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- CSS-Filtereffekte Modul
- Die anderen
<filter-function>
Funktionen, die in Werten derfilter
undbackdrop-filter
Eigenschaften verwendet werden können, umfassen: