Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.

View in EnglishAlways switch to English

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.

Diehue-rotate()CSS Funktion rotiert denFarbton eines Elements und dessen Inhalte. Das Ergebnis ist eine<filter-function>.

Hinweis:hue-rotate() wird als Matrixoperation auf der RGB-Farbe spezifiziert. Es konvertiert die Farbe nicht tatsächlich in das HSL-Modell, welches eine nicht-lineare Operation ist. Daher kann es die Sättigung oder Helligkeit der Originalfarbe, insbesondere bei gesättigten Farben, nicht bewahren.

Probieren Sie es aus

filter: hue-rotate(0);

filter: hue-rotate(90deg);

filter: hue-rotate(-0.25turn);

filter: hue-rotate(3.142rad);

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

Syntax

css

hue-rotate(angle)

Werte

angleOptional: Die relative Änderung im Farbton des Eingabemusters, angegeben als ein<angle>. Ein Wert von0deg belässt die Eingabe unverändert. Eine positive Farbton-Rotation erhöht den Farbtonwert, während eine negative Rotation den Farbtonwert verringert. Der Anfangswert für dieInterpolation ist0. Es gibt keinen Mindest- oder Höchstwert. Der Effekt von Werten über360deg wird, gegebenhue-rotate(Ndeg), alsN modulo 360 evaluiert. Der Standardwert ist0deg.

Der CSS-Datentyp<angle> stellt einen Winkelwert dar, der in Grad, Gon, Radiant oder Umdrehungen ausgedrückt wird. Folgende sind gleichwertig:

css

hue-rotate(-180deg)hue-rotate(540deg)hue-rotate(200grad)hue-rotate(3.14159rad)hue-rotate(0.5turn)

Formale Syntax

<hue-rotate()> =
hue-rotate([<angle>|<zero>]?)

Beispiele

Mit der backdrop-filter-Eigenschaft

Dieses Beispiel wendet einenhue-rotate()-Filter über die CSS-Eigenschaftbackdrop-filter auf den Absatz an, wodurch der Farbbereich hinter dem<p> verschoben wird.

css

.container {  background: url("/shared-assets/images/examples/listen_to_black_women.jpg")    no-repeat left / contain #011296;}p {  backdrop-filter: hue-rotate(240deg);  text-shadow: 2px 2px #011296;}

.container {  padding: 3rem;  width: 30rem;}p {  padding: 0.5rem;  color: white;  font-size: 2rem;  font-family: sans-serif;}

<div>  <p>    Text on images can be illegible and inaccessible even with a drop shadow.  </p></div>

Mit der filter-Eigenschaft

Dieses Beispiel wendet einenhue-rotate()-Filter über die CSS-Eigenschaftfilter an, wodurch der Farbbereich für das gesamte Element einschließlich Inhalt, Rand und Hintergrundbild verschoben wird.

css

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

p {  padding: 0.5rem;  font-size: 2rem;  font-family: sans-serif;  width: 85vw;}

<p>The person who wrote this example is not a designer, fortunately.</p>

Mit url() und dem SVG hue-rotate-Filter

Das SVG<filter>-Element wird verwendet, um benutzerdefinierte Filtereffekte zu definieren, die dann durchid referenziert werden können. DerhueRotate-Typ der<feColorMatrix>-Primitive des<filter> liefert denselben Effekt. Gegeben sei folgendes:

html

<svg  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 220 220"  color-interpolation-filters="sRGB"  height="220"  width="220">  <filter>    <feColorMatrix type="hueRotate" values="90" />  </filter></svg>

Diese Werte erzeugen dasselbe Ergebnis:

css

filter: hue-rotate(90deg); /* 90deg rotation */filter: url("#hue-rotate"); /* with embedded SVG */filter: url("folder/fileName.svg#hue-rotate"); /* external svg filter definition */

Dieses Beispiel zeigt drei Bilder: das Bild mit einerhue-rotate()-Filterfunktion, das Bild mit einem äquivalentenurl()-Filter und die Originalbilder zum Vergleich:

<table>  <thead>    <tr>      <th><code>hue-rotate()</code></th>      <th><code>url()</code></th>      <th>Original image</th>    </tr>  </thead>  <tbody>    <tr>      <td>        <img                   src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"          alt="Pride flag with rotated colors" />      </td>      <td>        <img                   src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"          alt="Pride flag with rotated colors" />      </td>      <td>        <img          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"          alt="Pride flag" />      </td>    </tr>  </tbody></table>

.css-filter {  filter: hue-rotate(90deg);}.svg-filter {  filter: url("#hue-rotate");}th,td {  padding: 5px;}svg:not(:root) {  display: none;}

hue-rotate() bewahrt nicht Sättigung oder Helligkeit

Das unten stehende Diagramm vergleicht zwei Farbverläufe, die mit Rot beginnen: Der erste wird unter Verwendung vonhue-rotate() erzeugt, und der zweite verwendet tatsächliche HSL-Farbwerte. Beachten Sie, wie derhue-rotate()-Gradient offensichtliche Unterschiede in Sättigung und Helligkeit in der Mitte zeigt.

html

<div>  <p>Using <code>hue-rotate()</code></p>  <div></div></div><div>  <p>Using <code>hsl()</code></p>  <div></div></div>

#hue-rotate,#hsl {  display: flex;  margin: 1em 0;}#hue-rotate div,#hsl div {  width: 2px;  height: 100px;}

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

Siehe auch

CSS-Filtereffekte-Modul
Die anderen<filter-function>-Funktionen, die in Werten derfilter- undbackdrop-filter-Eigenschaften verwendet werden können, sind:

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モバイル変換

hue-rotate()

Help improve MDN