`hue-rotate()` CSS-Funktion

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2016 browserübergreifend verfügbar.

Die hue-rotate() CSS Funktion rotiert den Farbton eines Elements und dessen Inhalt. Das Ergebnis ist eine <filter-function>.

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

Probieren Sie es aus

filter: hue-rotate(0);

filter: hue-rotate(90deg);

filter: hue-rotate(-0.25turn);

filter: hue-rotate(3.142rad);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

css

hue-rotate(angle)

Werte

angle Optional: Die relative Änderung des Farbtons des Eingabesamples, angegeben als <angle>. Ein Wert von 0deg lässt die Eingabe unverändert. Eine positive Farbtonrotation erhöht den Wert des Farbtons, während eine negative Rotation den Farbtonwert verringert. Der Anfangswert für Interpolation ist 0. Es gibt keinen minimalen oder maximalen Wert. Die Wirkung von Werten über 360deg hinaus wird, gegeben hue-rotate(Ndeg), als N modulo 360 ausgewertet. Der Standardwert ist 0deg.

Der CSS-Datentyp <angle> repräsentiert einen Winkelwert, ausgedrückt in Grad, Gradian, Radiant oder Umdrehungen. Die folgenden sind äquivalent:

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 Eigenschaft backdrop-filter

In diesem Beispiel wird ein hue-rotate()-Filter über die CSS-Eigenschaft backdrop-filter auf den Absatz angewendet, wodurch der Bereich hinter dem <p> farbverschoben 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 class="container">
  <p>
    Text on images can be illegible and inaccessible even with a drop shadow.
  </p>
</div>

Mit der Eigenschaft filter

In diesem Beispiel wird ein hue-rotate()-Filter über die CSS-Eigenschaft filter angewendet, wodurch die Farbumwandlung auf das gesamte Element, einschließlich Inhalt, Rand und Hintergrundbild, übertragen 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 per id referenziert werden können. Der hueRotate-Typ der <filter><feColorMatrix> primitiven bietet den gleichen Effekt. Angenommen, folgendes:

html

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

Diese Werte erzeugen die gleichen Ergebnisse:

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 einer hue-rotate()-Filterfunktion, das Bild mit einem äquivalenten url()-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
          class="css-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag with rotated colors" />
      </td>
      <td>
        <img
          class="svg-filter"
          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 folgende Diagramm vergleicht zwei Farbverläufe, die mit Rot beginnen: Der erste wird mit hue-rotate() erzeugt, und der zweite verwendet tatsächliche HSL-Farbwerte. Beachten Sie, wie der hue-rotate()-Verlauf auffällige Unterschiede in Sättigung und Helligkeit in der Mitte zeigt.

html

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

#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

Spezifikation
Filter Effects Module Level 1 # funcdef-filter-hue-rotate

Browser-Kompatibilität

Siehe auch

Modul CSS Filtereffekte
Die anderen <filter-function>-Funktionen, die in Werten der Eigenschaften filter und backdrop-filter verwendet werden können, umfassen:

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

hue-rotate() CSS-Funktion

Help improve MDN

`hue-rotate()` CSS-Funktion